更改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行为

.example {
  will-change: transform;
}