幻灯片动画效果很好在Firefox，但在Chrome结巴 [英] slide animation works well in firefox but stutters in chrome

问题描述

我建立，其中中央DIV如果推出了屏幕的网站，当你点击一个按钮，通过放置或者左侧，顶部或页面右侧。

I am building a website in which a center div if pushed out of the screen when you click a button by another div that is positioned either to the left, top or right of the page.

左侧，顶部和右侧的div将使用jQuery AJAX加载并使用CSS3的动画。

The left, top and right divs will be loaded using jquery ajax and is animated using css3.

下面是页面我所说的：

http://www.uvm.edu/~areid/homesite/index。 HTML

试着点击Chrome和Firefox的左眼。你会看到，动画流畅在Firefox，但口吃的铬。

Try clicking the left eye in Chrome and Firefox. You will see that the animation is smooth in Firefox but stutters in chrome.

有没有人有任何想法，为什么这可能发生？

Does anyone have any idea why this might be happening?

我也想知道，如果有人知道我怎么可能会加快网页/使过渡看起来更加平滑。

I was also wondering if anyone knew how I could potentially speed up the website/make the transitions look smoother.

感谢您的帮助，你们可能有

thanks for any help you guys might have

最好的，

凯蒂

推荐答案

我可以清楚地看到在Chrome的跳跃。

I can clearly see the jerkiness in Chrome.

CSS3动画不一定流畅运行，如果你正在做大量的在浏览器之外的东西。如何顺利它们运行取决于你正在试图做的同时，如何在浏览器内实现处理这还有什么。

CSS3 animations do not necessarily run smoothly if you are doing lots of other things in the browser. How smoothly they run depends upon what else you're trying to do at the same time and how the internal implementation in the browser handles that.

从我的经验用CSS3幻灯片使用花哨的CSS3过渡，以使他们能够流畅运行是您想要的动画平稳运行的同时不要做你的code实质性的东西的最佳方式。这里有一些方法来最大化平稳运行的可能性：

From my experience with a CSS3 slideshow that uses fancy CSS3 transitions, the best way to allow them to run smoothly is to NOT do substantial things with your code at the same time that you want the animation to be running smoothly. Here are some ways to maximize your chances of a smooth run:

您可能会在动画的时候需要
1. preLOAD资源。
2. 在动画的运行时不要踢任何JavaScript函数。
3. 在动画过程中避免加载图片。
4. 对于要在动画后运行，通过动画的补全功能触发其运行（这样它们就不会启动，直到动画完成）的东西。
5. 如果你想要的东西建成并准备当动画完成，然后在第一次启动动画之前建立它，并让它隐藏，并准备启动动画之前去了。
6. 您的动画过程中不要修改DOM（不是什么特别要求为动画等）。

1. Preload resources you may need during the time of the animation.
2. Don't kick of any javascript functions during the run time of the animation.
3. Avoid loading images during the animation.
4. For things that you want to run after the animation, trigger their operation via the completion function of the animation (so they don't start until the animation is done).
5. If you want something built and ready when the animation is done, then build it first before starting the animation and have it hidden and ready to go before you start the animation.
6. Don't modify the DOM during your animation (other than what is required specifically for the animation).

更具体地在您的网页，我看到急动的幻灯片切换，但在同一时间，因为它是滑动的，我看到了浏览器试图加载在幻灯片中显示的新内容。很可能的加载和显示的新内容正在促进滑动过渡的急动。我建议你​​要么等待幻灯片做是为了开始加载新的内容或你preLOAD开始幻灯片之前，新的内容。我发现，一些浏览器获得生涩的CSS3过渡即使在浏览器只是加载图像通过网络。

More specifically in your page, I see jerkiness in the slide transition, but at the same time as it is sliding, I see the browser trying to load the new content that displays during the slide. It is likely that the loading and displaying of that new content is contributing to the jerkiness of the slide transition. I'd suggest that you either wait until the slide is done to start loading the new content or you preload the new content before starting the slide. I've found that some browsers get jerky in CSS3 transitions even when the browser is just loading images over the network.

这篇关于幻灯片动画效果很好在Firefox，但在Chrome结巴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！