在 javascript 计算时使用 CSS 动画答案

【问题标题】：Using CSS animation while javascript computes在 javascript 计算时使用 CSS 动画
【发布时间】：2012-09-27 00:00:14
【问题描述】：

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

我想知道是否有任何方法可以在 javascript 执行时让某些东西动画化？

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

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

【问题讨论】：

用jquery动画怎么样？
只使用gif图像怎么样？
我相信 jquery 动画也有同样的局限性，那就是任何密集的计算都会冻结它们。至于 gif 图像，它们适用于重复的“等待”图标，但不适用于加载栏中的平滑效果。

标签： javascript css-transitions css-animations

【解决方案1】：

CSS3 动画不会被 Javascript 阻止，除非正在进行一些紧张的处理（在这种情况下，您可能会卡顿）。

如果您在加载期间触发它们，我会看到它们会延迟，直到它们到达脚本的该部分。

解决此问题的一种方法是在脚本的最开始设置超时以在特定时间触发动画更改。

另一个（也许更好）的选择是使用关键帧。确保在加载开始之前调用它。 http://dev.w3.org/csswg/css3-animations/#keyframes

【讨论】：

这不会回答他的问题。如果 javascript 锁定浏览器线程（长时间运行的一系列代码），CSS 动画将停止。请参阅此处：jsfiddle.net/Shmiddty/8p5Ah/1 动画直到 while 循环完成后才会恢复。
没错，我用另一个例子编辑了我的问题，专注于我的实际问题。
这对我有用：jsfiddle.net/8p5Ah/5（未经浏览器测试，只是 chrome）
另一种选择是网络工作者，但我还没有测试过这个用例。 developer.mozilla.org/en-US/docs/DOM/Using_web_workers
好的，我现在明白我不应该谈论 css 动画，而应该谈论 css 过渡。我应该为此问题发布一个不同的问题吗？我也认为网络工作者可以解决我的问题。