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

問題描述

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并沒有生效?？偨Y一下：display:block并且有過渡效果（transition）時就不生效。https://jsfiddle.net/25d3ga9j...

問題解答

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