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

Question

https://jsfiddle.net/zjmove/2...

---看完xiaoboost的回答---
最後這樣改最適合：https://jsfiddle.net/25d3ga9j...
我沒說清楚，其實我並不需要next的動畫，只需要left從右往左的效果。至於為什麼初始display:block就沒有動畫效果，可能這樣初始item就已經顯示出來了，force reflow沒來得及重繪；display:none就不需要重繪頁面了，left時直接從右往左就行了。再次感謝。

--
只能說問題跟這個force reflow有關，到底是什麼原理還是不清楚的。

--不同瀏覽器差異大啊
上面的改法，在firefox裡完美，在chrome57(ubuntu)裡滑鼠移動會閃爍一次

--初始display:block，印出transforms屬性，發現force reflow並沒有生效。總結一下：display:block並且有過渡效果（transition）時就不生效。
https://jsfiddle.net/25d3ga9j...

Answer 1

首先，我個人覺得這是因為網頁渲染流程和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);