CSS3 動畫效果帶來的bug

標籤：style   使用   set   問題   代碼   line   

css3 動畫效果比如transition:all 2s linear;這種用來計算及時的物體座標的話會帶來一定的問題

比如把一個DIV從A點移動到B點。JS為DIV.style.left=B;

但是當我們使用上面的transition屬性後，A點移動到B點是2秒內完成的，當執行JS代碼時候，DIV還沒到應該的位置，那麼，在Div.style.left=B; console.log(Div.offsetLeft);

這樣console出來的是起點座標而不是終點座標。

即使你讓其JS線程主動掛起使用如setTimeout,0這樣的還是不行，估計CSS3動畫沒有使用GUI線程，只能使用setTimeout 2000後讀取offsetLeft才能得到正確的值。

 

那麼，在像響應式布局使用CSS3動畫效果時，當視窗大小改變，新的元素被添加的時候也會引起元素錯位等問題。因為你在for迴圈全部的元素的時候，引發的重排版的時候，下一行元素的定位依賴於上

一行元素的定位，當上一行元素還在執行動畫效果，還沒到應該到的位置的時候，下一行元素就已經開始計算了，這時候元素的位置計算就是錯誤的。必須要等上一個元素的完全到位了才能得到其正確的

位置。

解決方案：把應該的定位儲存到這個元素的屬性中而不是直接設定為其的X,Y位置，因為屬性的話不存在動畫效果，執行時間也可以忽略不計。更不存線上程的問題，我們把所有的元素的定位值設定到這

個元素的屬性中。下一個元素判斷位置直接讀取上一行元素中的屬性值，即使上一行的元素還在跑往應該的位置上也不會出現位置重複了。