为什么这个 CSS Translate3d Animation Janky？

Question

我不明白为什么使用硬件加速属性 transform: translate3d(); 的 css 转换性能不流畅。也许是因为元素是绝对定位的？我不知道...

有人可以向我解释为什么以及如何修复吗？如果您使用 Chrome 的开发工具 -> 时间轴，记录，然后运行单击屏幕动画，您会看到性能不佳。

这是我的开发工具的屏幕截图。

Answer 1

我认为这可能与您使用的缓动属性有关。尝试将过渡设置为 ease-out

col {
    transition: transform 0.5s ease-out;
}

Answer 2

您的列没有从文档流中分离出来。您可以看到初始状态下的水平滚动条。尝试添加以下代码以确保它们不会触发重绘和滚动。

.columns {
  overflow:hidden;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

Answer 3

你可以做几件事。

如果您知道这些将不断变化并且您没有很多可以添加：

will-change: transform;

根据您的 .columns .col 规则。 (read about will-change here)

同时将转换中的 ease 更改为 ease-in-out。

最后，您的页面大小发生了变化，这会强制重新绘制，在您的情况下，解决此问题的最简单方法是将其添加到您的样式表中：

body{
    overflow: hidden;
}

Why is this CSS Translate3d Animation Janky?