使用变换和不透明度来避免触发器布局

更改某些 CSS 属性将触发浏览器同步计算样式和布局，这在你需要以 60fps 动画时是一件坏事。

别

使用 left 和 top 触发布局动画。

#box {
  left: 0;
  top: 0;
  transition: left 0.5s, top 0.5s;
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: gray;
}

#box.active {
  left: 100px;
  top: 100px;
}

演示需要 11.7 毫秒渲染， 9.8 毫秒绘画

做

使用相同的动画使用 transform 进行动画处理。

#box {
  left: 0;
  top: 0;
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: gray;

  transition: transform 0.5s;
  transform: translate3d(0, 0, 0);
}

#box.active {
  transform: translate3d(100px, 100px, 0);
}

演示相同的动画，渲染时间为 1.3ms ，绘画时间为 2.0ms 。