如何使这个滑块更流畅？

Question

我刚刚根据CSS比例，模糊和位置转换构建了一个自定义滑块。

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

不要专注于功能，我只是想让它更流畅。

想法是拥有一套“卡片”。第一个是锋利的，具有正常的尺寸，以下是较小的，模糊的和缩小的。它们越远，它们越模糊和越小。

如何处理动画：jQuery检查并更新位置，然后为每张卡片提供新的位置，模糊和缩放。因此， CSS更改会立即生成，而动画则由CSS transition属性生成。

• 有什么建议让它更流畅？
• 我应该使用像jQuery动画这样的东西吗？

Answer 1

CSS动画在性能方面存在局限性。对于像变换这样的简单事情，CSS做得很好。但更复杂的是，IMO与模糊和其他过渡相结合将会减慢。

jQuery具有动画功能，但它不是动画库。所以它的animate（）方法有时候很慢。

出于您的目的，我建议使用性能更高的真实动画库。脑海中浮现出两个图书馆：GSAP和Velocity。

为什么jQuery不适合动画
http://davidwalsh.name/css-js-animation

<强> GSAP
http://greensock.com/gsap
GSAP与CSS3的表现：https://greensock.com/transitions/

<强> Velocity.js
http://julian.com/research/velocity/

他们的语法非常容易理解，根据我的经验，即使在移动设备上，它们的表现也非常好。