我刚刚浏览了 odoeter.js 的源代码并遇到了以下代码行::
<!-- Force 3d acceleration always and forever :) -->
<div style="-webkit-transform: translateZ(0)"></div>
这是干什么用的?我不太明白。
我指的是 odometer.js 的这一页 。
有人可以用一个简单的例子来解释一下吗?
谢谢。
亚历山大。
最佳答案
通过使用 translateZ(或其他 3d 动画),您可以为动画启用硬件加速,即使它是像 0
这样的假 3d 动画,因为它除了启用 HA 之外什么都不做。 HA 将提高动画的流畅度。如果您打算将 javascript 用于动画,我会看一下 velocity.js,它的得分远远超过 jQuery 的 animate()。看看here进行比较。
为了进一步提高动画速度,一定要添加
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
backface-visibility: hidden;
perspective: 1000;
到您的动画元素。
关于javascript - 理解使用 translateX 进行 3d 加速,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31126078/