javascript - 在 javascript 计算时使用 CSS 动画

标签 javascript css-transitions css-animations

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

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

我知道我可以设法不时将控制权交还给浏览器以让它刷新,但我发现在后台使用 javascript 计算某些东西只会卡住整个界面是愚蠢的。

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

最佳答案

CSS3 动画不会被 Javascript 阻止,除非正在进行一些密集的处理(在这种情况下您可能会遇到卡顿)。

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

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

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

关于javascript - 在 javascript 计算时使用 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12752864/

相关文章:

javascript - 文本框应仅允许十六进制十进制值

javascript - 查询。从选定的 <option> 中查找所有包含文本的 <tr>

CSS 动画在 Firefox 和 IE 中不起作用

html - CSS 关键帧动画不适用于 SVG

html - CSS横线动画(渐变色​​)

javascript - 当访问者访问特定页面时从缓存中删除我的网站

javascript - 在 .row-fluid 容器中 Bootstrap .row

CSS3 Transform - 处理悬停后的行为

css - 如何修复 MS Edge 中的跳跃/捕捉 CSS 悬停效果

html - 带过滤器的新伪元素的过渡