我有一个非常复杂的网络应用程序，它使用 -webkit-transform 和 -webkit-transition 完成了复杂的 60fps 动画。通常有几十个项目同时动画。当它“加速”时，动画看起来很棒，但是当用户输入时，动画中有时会出现非常明显的“减速”。大部分动画都非常高效，但是当许多项目从静态过渡到移动时，我无法在 javascript 中找到明显的延迟。
问问题
802 次
1 回答
4
这很难追踪，但我已经完全修复了它：
问题似乎是，当一个没有 3d 变换的对象突然得到一个时，当该元素的位图被发送到视频卡时，就会出现“停顿”。当你有很多项目这样做时，它可能会非常引人注目，并将你的 60fps 体验变成......更少的东西。
答案很简单：在您的项目上保留“空”3d 变换，即使它们目前不是 3D。这样，图像将尽早传输到视频卡，当您需要为它们设置动画时，您不会遇到很大的延迟。
这将起作用：-webkit-transform: translateZ(1px)
这可能有效，但我可以想象它在未来的版本中被优化（因为它没有可见的效果）-webkit-transform: translateZ(0px)
于 2012-06-15T00:15:03.660 回答