使用CSS的左过渡动画具有更好的性能

Question

这就是我所拥有的：

.s2 {
top: 150px;
left: 20px;
position: absolute;
transition: left 300ms linear;
}

我使用JavaScript在滚动时动态更改左侧位置。目前，在移动设备上，甚至在桌面浏览器中，性能都很差。

我该如何改进？有更好的方法吗？

Answer 1

• 考虑使用requestAnimationFrame 限制滚动

• 如果可以的话，使用translate等属性，而不是左侧或顶部

• 广告translateZ(0(或translate3d(0,0,0(在移动设备上触发GPU(并不总是保证(

此外，由于您在滚动过程中设置动画，因此不需要使用转换属性，除非您有断点/阈值，在滚动量超过某个值时可以设置该属性。