javascript - CSS 过渡是否比 DOM 动画表现更好？

Question

我正在运行一些使用 ScrollerJS 进行数字滚动的东西.它支持两种模式:CSS 过渡和 DOM 动画。当我使用DOM动画模式时，我发现有时滚动并不比CSS过渡平滑。

所以我想知道 CSS 过渡效果是否普遍优于 DOM 动画？有任何证据或测试表明这一点吗？

CSS 转换:转换元素的 CSS3 transition/transform 属性

DOM 动画:传统的 DOM 动画，不断改变 CSS top 属性。

Answer 1

简而言之，是的。在 CSS 中做它允许浏览器优化它，例如使用硬件加速。

如果您操作 DOM，浏览器通常必须重新渲染内容，这通常会比较慢。

DOM 操作通常用于支持不支持 CSS 动画(或实现不佳)的旧版浏览器。

来自 http://scrollerjs.pixelstech.net/#about

If CSS transition is supported in a browser, CSS transition will be the preferred option for animation.

If in old browsers where CSS transition is not supported. DOM animation will be chosen automatically.

但是，请注意，像往常一样，事情从来都不是完全简单的，也没有任何概括是完全正确的……有一些 javascript 动画库可以与基于 CSS 的过渡/动画相媲美，有时甚至可以胜过它们，它们通常是更灵活。这是一些简单的阅读:

http://davidwalsh.name/css-js-animation

https://css-tricks.com/myth-busting-css-animations-vs-javascript/