为什么这个 CSS Translate3d 动画 Janky？答案

【问题标题】：Why is this CSS Translate3d Animation Janky?为什么这个 CSS Translate3d 动画 Janky？
【发布时间】：2016-10-29 07:35:22
【问题描述】：

我无法弄清楚为什么使用硬件加速属性transform: translate3d(); 的这种 css 转换的性能无法顺利运行。也许是因为元素是绝对定位的？我不知道...

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

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

【问题讨论】：

【解决方案1】：

您的列并未脱离文档流。可以看到初始状态下的水平滚动条。尝试添加以下代码以确保它们不会触发重绘和滚动。

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

【讨论】：

【解决方案2】：

你可以做几件事。

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

will-change: transform;

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

还将转换上的ease 更改为ease-in-out。

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

body{
    overflow: hidden;
}

【讨论】：

【解决方案3】：

我相信这可能与您正在使用的 easing 属性有关。尝试将过渡设置为缓出

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

【讨论】：

感谢您的帮助，但这并没有奏效，仍然是相同的 FPS 配置文件，我也尝试了 linear 和其他缓动方法。
只是在这里吐口水，但我确实找到了另一个平滑 CSS 动画的参考 (davidwalsh.name/translate3d)。我不知道它是否会有所帮助，但值得一试。
欣赏链接，这是一个很好的技巧，但是我不需要它，因为我已经在 col 元素上定义了translate3d。这会将其粘贴在自己的硬件加速层上，因此我不需要其他属性来执行此操作。