在javascript计算时使用CSS动画 [英] Using CSS animation while javascript computes

问题描述

我正在开发一个需要在启动时生成和计算一堆数组的Web应用程序。我希望在发生这种情况时显示加载页面，并且可能会使用css动画播放一些内容，但似乎CSS动画会在执行javascript时挂起。我已经有一个关于处理的关键事件更新的加载栏，但我想使用css-transitions来平滑它。

I am developping a web application that needs to generate and compute a bunch of arrays at startup. I would like to show a loading page while this occurs, and maybe play a little with css animations, but it seems that CSS animations will hang while javascript is executed. I already have a loading bar that is updated on key events of the processing, but I would like to use css-transitions to smooth it a bit.

我想知道是否有什么方法可以在javascript执行时让某些东西变为动画？

I was wondering if there is any way to let something animate while the javascript is executing?

我知道我可以设法让浏览器不时给予控制权来刷新，但我发现用javascript在后台计算某些内容只会冻结你的整个界面很愚蠢。

I know I can manage to give back control to the browser from time to time to let it refresh, but I find it silly that computing something in background with javascript just freeze your whole interface.

编辑：这是我所说的一个愚蠢的例子： http://jsfiddle.net/YWefx/13/
如果禁用css转换，条形图每次迭代都会更新，但如果启用它，则转换只会在最后进行。所以我最终要么必须在每个循环之间等待400ms，除了动画之外只做4秒钟，最后有一个平滑的动画（没有显示进度条的好处），或者没有设置动画条。

Here is a dumb example of what I am talking about: http://jsfiddle.net/YWefx/13/ If you disable the css transitions, the bar is updated on each iteration, but if you enable it, the transition will only occur at the very end. So I end up with either having to wait 400ms between each loop, loosing 4 seconds doing nothing but animations, having a smooth animation at the end (loosing the benefits of displaying a progress bar), or not animating the bar.

推荐答案

CSS3动画不会被Javascript阻止，除非有一些激烈的处理（在这种情况下你可能会出现口吃）。

CSS3 animations do not get blocked by Javascript unless there is some intense processing going on (in which case you could get stutters).

如果你在加载期间触发它们，我可以看到它们被延迟，直到它们到达脚本的那一部分。

If you are triggering them during the load I could see them getting delayed until they get to that portion of the script.

解决这个问题的一种方法是在脚本的最开始部分setTimeouts在某些时间触发动画更改。

One way around this is to setTimeouts at the very beginning of the script to trigger animation changes at certain times.

另一个（可能更好）选项是使用关键帧。确保在加载开始前调用此方法。 http://dev.w3.org/csswg/css3-animations/#keyframes

Another (perhaps better) option would be to use keyframes. Make sure to call this before the loading begins. http://dev.w3.org/csswg/css3-animations/#keyframes

这篇关于在javascript计算时使用CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！