javascript - 使用 CSS 为左过渡动画提供更好的性能

Question

这是我的:

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

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

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

Answer 1

• 考虑使用 requestAnimationFrame 限制滚动

• 如果可以，请使用 translate 等属性，而不是 left 或 top

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

此外，由于您在滚动期间设置动画，因此您不需要使用过渡属性，除非您在滚动量超过特定值时设置属性的断点/阈值。