为什么这个CSS Translate3d动画Janky？

Question

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

CodePen Link

有人可以向我解释为什么以及如何解决？如果您使用Chrome的开发工具，则可以看到效果不佳 - ＆gt;时间轴，记录，然后单击屏幕运行动画。

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

Answer 1

您的专栏没有从文档流程中删除。您可以在初始状态下看到水平滚动条。尝试添加以下代码以确保它们不会触发重绘和滚动。

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

Answer 2

你可以做的事情。

如果您知道这些内容将会持续变化而且您没有多少可以添加：

.columns .col

符合您的ease规则。 (read about will-change here)

同时将变换ease-in-out更改为body{ overflow: hidden; } 。

最后你的页面大小正在改变哪些强制重新绘制最简单的方法来解决这个问题就是将它添加到你的样式表中：

{{1}}

这是codepen with all of those applied。

Answer 3

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

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