問題描述

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

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

--只能說問題和這個(gè)force reflow有關(guān)，到底什么原理還是不清楚的。

--不同瀏覽器差異大啊上面的改法，在firefox里完美，在chrome57(ubuntu)里鼠標(biāo)移動(dòng)會(huì)閃動(dòng)一次

--初始display:block，打印transforms屬性，發(fā)現(xiàn)force reflow并沒有生效。總結(jié)一下：display:block并且有過渡效果（transition）時(shí)就不生效。https://jsfiddle.net/25d3ga9j...

問題解答

首先，我個(gè)人覺得這是因?yàn)榫W(wǎng)頁渲染進(jìn)程和js進(jìn)程是互斥所導(dǎo)致的。

具體的可以看看這個(gè)問題：當(dāng)我用js給元素添加className時(shí)，瀏覽器發(fā)生了什么？ 我覺得高票答案已經(jīng)說的很清楚了，你在js腳本中加入的這么一句：

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

我猜也是想要強(qiáng)制重繪頁面吧？

我個(gè)人并沒有研究過這方面瀏覽器具體的實(shí)現(xiàn)，但是根據(jù)我個(gè)人的觀察，讀取DOM的信息雖然會(huì)強(qiáng)制重繪網(wǎng)頁，但實(shí)際上也只是內(nèi)部數(shù)據(jù)的重新計(jì)算，DOM的改變并不會(huì)反映到頁面中，真正的頁面重繪還是只能等到當(dāng)前js進(jìn)程完成之后。

具體到你這個(gè)例子中，為了以示區(qū)別，我把.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’);

在這里你會(huì)看到，打印出來的寬度只有一半，說明在內(nèi)存中的DOM數(shù)據(jù)的確是已經(jīng)重新計(jì)算了，但是頁面卻并沒有重繪。 和那邊那個(gè)問題中的解決方案一樣，你也只能用異步函數(shù)，在頁面效果切換的空隙中把進(jìn)程空出來給頁面渲染，這樣你才能看到動(dòng)態(tài)效果。

比如你這里，這么改就行了：

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