我尝试在屏幕上使用绝对定位来以60FPS进行元素动画,注意到大部分CPU时间都用在了recalculateStyles
上。
我能否改变element.style.transform
属性而不触发重新计算样式?
目前我是这样改变位置的:el.style.transform = 'translate3d(${x}px, ${y}px, 0px)'
;
这里有一个演示:http://jsfiddle.net/pLtvxv41/ 您可以使用Google Chrome性能开发工具查看recalculateStyle函数的使用情况。
这个能以更有效的方式改变吗?
offsetTop
一样触发同步回流。此外,如果您正在以线性方式动画化这些值,是否考虑使用 CSS 过渡效果? - Kaiido