javascript - 在不触发重新计算样式的情况下更改 CSS3 转换？

Question

尝试以 60FPS 为屏幕上具有绝对定位的元素制作动画时，我注意到大部分 CPU 时间都被 recaculateStyles 使用了。

我可以更改 element.style.transform 属性而不触发重新计算样式吗？

目前我这样改变位置:el.style.transform = 'translate3d(${x}px, ${y}px, 0px)';

这是一个演示:http://jsfiddle.net/pLtvxv41/您可以使用 Google Chrome 性能开发工具来查看 recalculateStyle 函数的用法。

能否以更有效的方式进行更改？

Answer 1

您是否尝试过默认添加 -webkit-transform: translate3d(0,0,0); 以避免完全重绘页面？

您也可以尝试将 will-change 行为改为 inform the browser转换属性将被更改

.example {
  will-change: transform;
}