更改CSS3转换而不触发重新计算样式？

Question

尝试在屏幕上以60FPS动画显示具有绝对定位的元素我注意到recaculateStyles使用了大部分CPU时间。

我可以在不触发重新计算样式的情况下更改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;
}