我應該使用/避免jQuery動畫？

一個問題突然出現在腦海中回答到this one，其中OP想申請這一轉變：我應該使用/避免jQuery動畫？

test.css({transition: 'height 1s linear', height: '100px'});

再回到這樣的：

test.css({transition: 'none', height: '0px'});

他說他需要它是從JS做的，要求一個更好的想法，所以我提出了這樣的做法：

test.animate({height: '100px'}, 1000, 'linear', function(){ 
    test.css({transition: 'none', height: '0px'}); 
});

@Matrix評論說，JS和jQuery動畫的優化不如原生CSS，這是正確的，但我認爲不是關於該上下文中的主題。

因此，這裏的問題：

是不是這個完成我建議的方法是什麼？或者你會建議反對嗎？爲什麼？

2016-05-25 onzinsky

jQuery中的動畫實現效率不高，但[velocity.js]（http://julian.com/research/velocity/）具有類似的API，效果更好。 – Pointy

我可以同意@Pointy，'velocity'非常好，高效。但是如果你保持你的動畫簡單而不是太多，'jQuery'也可以做得很好。 – linusg

謝謝@Pointy。我很少在屏幕上移動東西，但有時你必須。因此，它不是一個壞習慣（只要他們是一些，簡單的）js動畫，而不是試圖從本地CSS做這一切？ – onzinsky

從所有評論的結論：

jQuery沒有爲動畫對象創建的，所以它可能是緩慢和laggy（取決於你在什麼樣的動畫和多少）。但例如滾動頁面jQuery的.animate()功能在大多數情況下效果很好。

對於更高級的動畫（如移動物體或同時操作的方式配合物或許多動畫），使用庫作爲velocity。

如果你只是想動畫文字樣式/顏色或滑蓋下拉菜單，它的速度更快（更容易IMO）使用CSS過渡/動畫。

所以這取決於你在做什麼。希望這可以幫助！

2016-05-25 19:36:32 linusg

回答