使用CSS改善左过渡动画的性能

Question

这就是我所拥有的：

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

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

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

Answer 1

• 考虑使用requestAnimationFrame对滚动进行节流

• 使用“ translate”之类的属性来代替“ left”或“ top”

• 通过广告translationZ（0）或translate3d（0,0,0）触发移动设备上的GPU（并非始终保证）

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