javascript - 理解使用 translateX 进行 3d 加速

Question

我刚刚浏览了 odoeter.js 的源代码并遇到了以下代码行::

        <!-- Force 3d acceleration always and forever :) -->
        <div style="-webkit-transform: translateZ(0)"></div>

这是干什么用的？我不太明白。

我指的是 odometer.js 的这一页 。

有人可以用一个简单的例子来解释一下吗？

谢谢。

亚历山大。

Answer 1

通过使用 translateZ(或其他 3d 动画)，您可以为动画启用硬件加速，即使它是像 0 这样的假 3d 动画，因为它除了启用 HA 之外什么都不做。 HA 将提高动画的流畅度。如果您打算将 javascript 用于动画，我会看一下 velocity.js，它的得分远远超过 jQuery 的 animate()。看看here进行比较。

为了进一步提高动画速度，一定要添加

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
backface-visibility: hidden;
perspective: 1000;

到您的动画元素。