1

我正在构建一个网站，当您单击位于页面左侧、顶部或右侧的另一个 div 的按钮时，如果将中心 div 推出屏幕。

左侧、顶部和右侧 div 将使用 jquery ajax 加载，并使用 css3 进行动画处理。

这是我正在谈论的页面：

http://www.uvm.edu/~areid/homesite/index.html

尝试在 Chrome 和 Firefox 中单击左眼。您会看到动画在 Firefox 中很流畅，但在 chrome 中会卡顿。

有谁知道为什么会发生这种情况？

我还想知道是否有人知道我可以如何加快网站速度/使过渡看起来更顺畅。

感谢你们可能有的任何帮助

最好的，

凯蒂

4

1 回答 1

3

我可以清楚地看到 Chrome 的抖动。

如果您在浏览器中执行许多其他操作，CSS3 动画不一定能顺利运行。它们运行的​​流畅程度取决于您同时尝试做的其他事情以及浏览器中的内部实现如何处理它。

根据我对使用精美 CSS3 过渡的 CSS3 幻灯片的经验，让它们顺利运行的最佳方法是不要在您希望动画顺利运行的同时对您的代码做实质性的事情。这里有一些方法可以最大限度地提高顺利运行的机会：

  1. 预加载动画期间可能需要的资源。
  2. 在动画运行期间不要踢任何 javascript 函数。
  3. 避免在动画期间加载图像。
  4. 对于想要在动画之后运行的东西，通过动画的完成功能触发它们的操作（所以它们在动画完成之前不会启动）。
  5. 如果您希望在动画完成后构建并准备好某些东西，请在开始动画之前先构建它，并在开始动画之前将其隐藏并准备就绪。
  6. 不要在动画期间修改 DOM（除了动画特别需要的内容）。

更具体地说，在您的页面中，我看到幻灯片过渡时出现抖动，但在滑动的同时，我看到浏览器试图加载幻灯片期间显示的新内容。新内容的加载和显示很可能会导致幻灯片过渡的抖动。我建议您要么等到幻灯片完成后开始加载新内容，要么在开始幻灯片之前预加载新内容。我发现即使浏览器只是通过网络加载图像，某些浏览器在 CSS3 转换中也会出现抖动。

于 2012-10-31T19:34:56.753 回答