使用CSS动画的滞后和闪烁动画

Question

我正在工作一个交互式的网络用户界面，并遇到闪烁和滞后的动画。

我几乎完全使用CSS转换，使用jQuery添加和删除类来启动/停止任何特定的动画。我听说这在性能上比使用jQuery动画更好，但是当我使用Chrome (应用程序的预期浏览器)时，我仍然会遇到闪烁和滞后的动画。

在这里查看一下:lib.ncsu.edu/亨特_touchscreens/demo

下面是我正在做的一个转换的例子。这是非常简单的，我没有使用任何webkit，o等前缀。

#x {
    opacity: 0;
    transition: opacity .5s;
}

我希望这个问题不是太开放，但我很好奇，这仅仅是浏览器有许多不同的并发转换的限制，还是有有效的策略来避免这些性能问题。

非常感谢你的建议。

Answer 1

这可能需要大量的工作，但是在您的站点中，您需要从左/右进行大量的transition，而这需要对浏览器征税，因为它必须重做它的布局，因为它不仅需要计算单个元素的移动，还需要计算它周围的任何其他元素。

拥有出色的css动画的诀窍是只坚持浏览器非常快的几个属性，特别是当您有一个像您这样的过渡沉重的页面时，其中许多元素可能同时移动。

阅读更多关于它的这里，但是它的要点是使用以下属性来更改元素，

• 位置translateX(n) translateY(n) translateZ(n)；
• 尺度 - 变换:尺度(N)；
• 旋转 - 变换:旋转；
• 不透明度 - 不透明度: n；

因此，您需要重写所有这些“左”位置更改为某种形式的transform: translateX();，并考虑如果您希望获得最佳性能，这将如何影响页面中的其他元素。