通過指定應用css規則的時間點來加速JavaScript動畫

假設我在頁面上有10個元素。通過指定應用css規則的時間點來加速JavaScript動畫

在當前時刻，我遍歷他們在一個循環中不斷變化的寬度和位置：

el[i].style.width = .... 
el[i].style.left = ....

我想知道如果，如果我告訴瀏覽器只能重新呈現所有元素的動畫可以跑得更快一次，循環完成後

來源

2013-02-04 Dan

是CSS3或jQuery的選擇嗎？ – Shmiddty

預定義的CSS3樣式不是一個選項，因爲我正在使用移動元素編寫遊戲 – Dan

您可以使用過渡......'transition：all 1s linear;'因此，當您更改元素的任何屬性時，它將轉換爲它的新價值。如果需要，你可以爲每個你關心的屬性指定單獨的轉換：'transition：width 1s linear，left .5s ease-in-out;'etc – Shmiddty

使用CSS3更快，你w生病編碼少得多，看看這個Jsbin，我只是做了兩個例子，一個用transition（.anima2），另一個用animation（.anima）。用JS你只需要申請和刪除類。

來源

2013-02-04 19:27:29 Bema

如果您將更改應用於共享類或加載其中包含所有更改的樣式表，這將使所有更改同時應用，但不確定性能影響，但...

來源

2013-02-04 19:08:47 TheZuck

我正在用一些公式計算CSS規則，沒有機會預測這些數字） – Dan

被我調查（不完全跨瀏覽器的，行爲不同而變化，這需要測試ABD標杆繁重的工作）：

一）

B）CSS translate3d和其他新的CSS3代替的left爲GPU優化

回來後，我會告訴結果

來源

2013-04-05 08:38:23 Dan

通過指定應用css規則的時間點來加速JavaScript動畫

回答

相關問題