2

这是一个非常奇怪的问题：

我有一个圆圈，通过 CSS 旋转转换无限期地旋转，为了让它无限期地旋转，我使用 jquery 将每 30 秒的旋转值更改为更大的值。我发现这比完整的 CSS 解决方案在视觉上更流畅。

然而，我注意到 css 转换的行为是这样的：当窗口 > 选项卡 > 页面 > 元素有另一个选项卡处于活动状态或窗口最小化时，即使转换未完成，它也会停止。

所以jquery继续，但是过渡停止，使得旋转速度增加。停止在选项卡未聚焦时增加旋转的 jquery 函数有帮助，但不能完全解决问题，因为在元素“可见”但选项卡未聚焦的情况下（想想打开的选项卡但上面的另一个程序处于活动状态浏览器或浏览器的另一个窗口可能在磁贴中打开）过渡继续进行，但 jquery 计时器停止，最终使圆圈自行停止。

4

2 回答 2

0

也许您可以使用后台任务来刷新 CSS。查看此线程：在 Javascript 中执行后台任务

于 2013-04-12T14:31:47.647 回答
0

你为什么要为此使用过渡？

#yourElement {
    animation:spin 10s linear;
    -webkit-animation:spin 10s linear;
}
@keyframes spin {
    from {transform:none}
    to {transform:rotate(360deg)}
}
@-webkit-keyframes spin {
    from {-webkit-transform:none}
    to {-webkit-transform:rotate(360deg)}
}

即使使用选项卡开关，这也会流畅而完美地制作动画。

于 2013-04-12T14:31:54.523 回答