css3 - transition transform初始display:block怎麼就沒移動效果？

Question

https://jsfiddle.net/zjmove/2... ---看完xiaoboost的回答---最後這樣改最合適：https://jsfiddle.net/25d3ga9j...我沒說清楚，其實我並不需要next的動畫，只需要left從右往左的效果。至於為什麼初始display:blo...

伊谢尔伦 · Answer

首先，我個人覺得這是因為網頁渲染流程和js流程是互斥所導致的。

具體的可以看看這個問題：當我用js為元素添加className時，瀏覽器發生了什麼事？
我覺得高票答案已經說的很清楚了，你在js腳本中加入的這麼一句：

$('.item')[0].offsetWidth;

我猜也是想要強制重繪頁面吧？

我個人並沒有研究過這方面瀏覽器具體的實現，但是根據我個人的觀察，讀取DOM的信息雖然會強制重繪網頁，但實際上也只是內部數據的重新計算，DOM的改變並不會反映到頁面中，真正的頁面重繪還是只能等到目前js進程完成之後。

具體到你這個例子中，為了以示區別，我把.next和.left在css中的宽度稍微改了改，然后js中打印出添加上.next類之後的寬度：

.item.next {
  display: block;
  width: 50%;
  transform: translate3d(100%, 0, 0);
  left: 0;
}

.item.next.left {
  width: 100%;
  transform: translate3d(0, 0, 0);
  left: 0;
}

$('.item').addClass('next');
console.log($('.item')[0].offsetWidth); 
$('.item').addClass('left');

在這裡你會看到，列印出來的寬度只有一半，說明在記憶體中的DOM資料的確是已經重新計算了，但是頁面卻並沒有重繪。
和那邊那個問題中的解決方案一樣，你也只能用非同步函數，在頁面效果切換的空隙中把進程空出來給頁面渲染，這樣你才能看到動態效果。

比如你這裡，這麼改就行了：

$('.item').addClass('next');
setTimeout(() => {
    $('.item').addClass('left');
}, 1000);