CSS 动画与 JQuery 动画 [英] CSS Animations vs JQuery Animations

问题描述

我几乎总是在我从事的任何 Web 项目中使用 JQuery 动画，但我想知道 CSS 动画有何不同.我知道语法是不同的(显然)，但是 CSS 动画有哪些 JQuery 没有的特性，反之亦然.各自的优缺点是什么?有没有更好的功能?每种方法的效率如何?

I almost always use JQuery animations for any web projects I work on, but I was wondering how CSS animations are different. I know the syntax is different (obviously), but what are some features that CSS animations has that JQuery doesn't and vice versa. What are the pros and cons of each? Does one have better functionality? How efficient is each?

推荐答案

CSS3 动画性能与 JavaScript 竞争，但不一定优越.此页面可让您测试多种浏览器动画技术并查看实际差异.

CSS3 animation performance is competitive with JavaScript, but not necessarily superior. This page lets you test multiple browser animation techniques and see the actual differences.

https://greensock.com/js/speed.html

CSS3 动画在与 JavaScript 不同的线程中运行，因此它非常无阻塞.所以如果你的应用有一些负载，CSS3 是最好的.

CSS3 animations run in a separate thread than JavaScript, so its very non-blocking. So CSS3 is best if your application has some load to it.

http://www.phpied.com/css-animations-off-the-ui-thread/

CSS3 动画通常也经过硬件加速(动画在 GPU 上运行，而不是 CPU 提升性能).但许多 JavaScript 动画工具也是如此.

CSS3 animations are also often hardware accelerated (the animation runs on the GPU instead of the CPU boosting performance). But so are many JavaScript animation tools.

技术上基本上就是这样.明智的编码风格，它们也有一些很大的差异.CSS3 动画的触发一般是通过在 JavaScript 中添加和删除 dom 类.因此，您的组件的行为最终存在于 2 个文件和 2 种语言之间.这一切都可以解决，但它会使代码更难以推理.

Thats basically it technically. Coding style wise, they have some big differences too. The triggering of CSS3 animations is generally through the adding and removing of dom classes from JavaScript. So the behavior of your component ends up living between 2 files and in 2 languages. This can all be worked around, but it can make code harder to reason about.

因此，如果您选择使用 CSS3 动画，我建议不要在 css 中这样做，而是使用 JavaScript 库，让您可以将 CSS3 动画存储在 JavaScript 中.或者你可以选择一个只有 JavaScript 的动画库，比如 GreenSock.无论哪种方式，我都建议将动画存储在 JavaScript 中，以便工作流程和易于理解.

So if you choose to go with CSS3 animations, I recommend not doing so in css, but using a JavaScript library that lets you store your CSS3 animations in JavaScript. Or you can choose a JavaScript only animation library like GreenSock. Either way I recommend storing animations in JavaScript for workflow and simplicity of understanding.

这篇关于CSS 动画与 JQuery 动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！