問(wèn)題描述

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

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

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

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

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

問(wèn)題解答

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

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

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

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

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

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

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

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

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