如何使這個滑塊更流暢？

Question

我剛剛構建了一個基於CSS縮放，模糊和位置轉換的自定義滑塊。

演示：https://jsfiddle.net/Paf_Sebastien/sjxrtny8/

不要專注於功能性，我只是想使它更流暢。

這個想法是有一套「卡」。第一個是尖銳的，尺寸正常，下面的尺寸更小，模糊和縮小。他們越遠，他們越模糊，越小。

是如何處理的動畫：jQuery的檢查和更新的位置，然後給每一個卡一個新的位置，模糊和比例。所以CSS更改立即進行和動畫由CSS transition屬性。

• 有什麼建議使它更流暢？
• 我應該使用其他類似jQuery動畫嗎？

Answer 1

CSS動畫在性能方面有限制。對於變換這樣的簡單事情，CSS做得很好。但任何更復雜的事情，國際海事組織，結合模糊和其他過渡將放緩。

jQuery具有動畫功能，但它不是一個動畫庫。所以它的animate（）方法有時非常慢。

爲了您的目的，我建議使用更高性能的真正的動畫庫。想起兩個庫：GSAP和Velocity。

爲什麼jQuery是不適合動畫
http://davidwalsh.name/css-js-animation

GSAP
http://greensock.com/gsap
GSAP VS CSS3性能：https://greensock.com/transitions/

Velocity.js
http://julian.com/research/velocity/

它們的語法都很容易遵循，就我的經驗而言，即使在移動設備上，它們的表現也非常好。