jquery/CSS動畫性能

我有一個關於jQuery創建css動畫的問題。jquery/CSS動畫性能

我剛剛完成了一個jQuery插件，用css繪製和動畫dom元素。我只使用jquery來更改和創建css變量。我剛剛在手機上測試了我的代碼，似乎變得非常不穩定。從我一直在讀的CSS 3動畫是硬件加速，而jQuery不是。

所以...是由jQuery硬件加速創建的運行時CSS屬性？

例如，將一個CSS屬性使用過渡時間爲0.3s

$(blades).css({'width':'5px'}); to animate

見我的代碼在http://andehlu.github.io/sensuJS/

謝謝刀片。

來源

2014-10-18 andehlu

使用translate3d（X，Y，Z）爲更好的加速* *表演。如果觸發jQuery或JS或'CSS3＃animation'沒有什麼區別，他們會翻譯得很漂亮。 – 2014-10-18 10:30:48

謝謝Roko！我將使用transform來代替寬度。謝謝。 – andehlu 2014-10-18 12:38:56

@ RokoC.Buljan我注意到了transform的行爲：scaleX與jquerys的width（）不同。它將元素加上它裏面的所有東西，比如背景圖片。我只希望增加像素寬度的數量。有沒有辦法用transform：scale來模擬width（）？ – andehlu 2014-10-18 14:15:04

建議不影響DOM元素結構（例如CSS trasnform或不透明度）的那些類型的過渡/動畫，以提高動畫速度（而不是改變例如width或top什麼會影響其他DOM元素）以及是CSS動畫比JS快。

的更多信息，你可以找到HERE和

HERE

來源

2014-10-18 10:57:24

jquery/CSS動畫性能

回答

相關問題