动画播放状态在 Safari 上不起作用
Posted
技术标签:
【中文标题】动画播放状态在 Safari 上不起作用【英文标题】:Animation play state not working on Safari 【发布时间】:2017-04-29 03:43:00 【问题描述】:我不知道出了什么问题,但我遇到的每个错误都与 Safari 相关,而且非常烦人。我的网站中有一个代码,当用户鼠标不在页面主体上时,例如在另一个选项卡中或物理上不在页面上,圆形动画暂停,当用户鼠标再次返回主体时,css动画恢复它停止的地方。它在 Chrome、Firefox 上完美运行......但在 Safari 上......它有这个蓝色背景,当你离开身体时会弹出,当你返回时它会变得疯狂并立即开始所有颜色。有时它甚至不会在完成后启动,您必须刷新。这是我录制的 GIF。
当蓝色背景出现时:
https://gyazo.com/1d063cb8ccce17481df858330b5c8a80
当所有颜色同时开始时:
https://gyazo.com/9b77fe0746c34aeae73af970aec9e75b
它的样子
https://gyazo.com/cdcebb77327b166d0995b2598938e6d7
这是我的代码。
代码笔 https://codepen.io/anon/pen/dWvwKR
Java 脚本
$("body").on("mouseleave",function()
console.log("MOUSE IS OUT");
$("#firstCircle").css("animation-play-state":"paused");
$("#firstCircle").css("-webkit-animation-play-state":"paused");
$("#firstCircle").css("-ms-animation-play-state":"paused");
$("#firstCircle").css("-moz-animation-play-state":"paused");
$("#firstCircle").css("-o-animation-play-state":"paused");
$("#secondCircle").css("animation-play-state":"paused");
$("#secondCircle").css("-webkit-animation-play-state":"paused");
$("#secondCircle").css("-ms-animation-play-state":"paused");
$("#secondCircle").css("-o-animation-play-state":"paused");
$("#secondCircle").css("-moz-animation-play-state":"paused");
$("#thirdCircle").css("animation-play-state":"paused");
$("#thirdCircle").css("-webkit-animation-play-state":"paused");
$("#thirdCircle").css("-ms-animation-play-state":"paused");
$("#thirdCircle").css("-moz-animation-play-state":"paused");
$("#thirdCircle").css("-o-animation-play-state":"paused");
$("#fourthCircle").css("animation-play-state":"paused");
$("#fourthCircle").css("-webkit-animation-play-state":"paused");
$("#fourthCircle").css("-moz-animation-play-state":"paused");
$("#fourthCircle").css("-o-animation-play-state":"paused");
$("#fourthCircle").css("-ms-animation-play-state":"paused");
$("#fifthCircle").css("animation-play-state":"paused");
$("#fifthCircle").css("-webkit-animation-play-state":"paused");
$("#fifthCircle").css("-ms-animation-play-state":"paused");
$("#fifthCircle").css("-moz-animation-play-state":"paused");
$("#fifthCircle").css("-o-animation-play-state":"paused");
$("#sixthCircle").css("animation-play-state":"paused");
$("#sixthCircle").css("-webkit-animation-play-state":"paused");
$("#sixthCircle").css("-o-animation-play-state":"paused");
$("#sixthCircle").css("-moz-animation-play-state":"paused");
$("#sixthCircle").css("-ms-animation-play-state":"paused");
);
$(window).on("mouseenter",function()
console.log("MOUSE IS IN");
$("#firstCircle").css("animation-play-state":"running");
$("#firstCircle").css("-webkit-animation-play-state":"running");
$("#firstCircle").css("-ms-animation-play-state":"running");
$("#firstCircle").css("-moz-animation-play-state":"running");
$("#firstCircle").css("-o-animation-play-state":"running");
$("#secondCircle").css("animation-play-state":"running");
$("#secondCircle").css("-webkit-animation-play-state":"running");
$("#secondCircle").css("-ms-animation-play-state":"running");
$("#secondCircle").css("-moz-animation-play-state":"running");
$("#secondCircle").css("-o-animation-play-state":"running");
$("#thirdCircle").css("animation-play-state":"running");
$("#thirdCircle").css("-webkit-animation-play-state":"running");
$("#thirdCircle").css("-ms-animation-play-state":"running");
$("#thirdCircle").css("-moz-animation-play-state":"running");
$("#thirdCircle").css("-o-animation-play-state":"running");
$("#fourthCircle").css("animation-play-state":"running");
$("#fourthCircle").css("-webkit-animation-play-state":"running");
$("#fourthCircle").css("-ms-animation-play-state":"running");
$("#fourthCircle").css("-moz-animation-play-state":"running");
$("#fourthCircle").css("-o-animation-play-state":"running");
$("#fifthCircle").css("animation-play-state":"running");
$("#fifthCircle").css("-webkit-animation-play-state":"running");
$("#fifthCircle").css("-ms-animation-play-state":"running");
$("#fifthCircle").css("-moz-animation-play-state":"running");
$("#fifthCircle").css("-o-animation-play-state":"running");
$("#sixthCircle").css("animation-play-state":"running");
$("#sixthCircle").css("-webkit-animation-play-state":"running");
$("#sixthCircle").css("-ms-animation-play-state":"running");
$("#sixthCircle").css("-moz-animation-play-state":"running");
$("#sixthCircle").css("-o-animation-play-state":"running");
);
);
【问题讨论】:
【参考方案1】:您好@thatoneguy90,这是因为 Safari 会在 1000 毫秒(1 秒)后暂停非活动选项卡上的 JS 以保留 CPU。您需要解决setInterval
和requestAnimationFrame
的自动暂停问题。当您在视口外滚动时,这也可能导致蓝色。
一定要访问这个以获取有关如何使其工作的 JS 示例: How can I make setInterval also work when a tab is inactive in Chrome?
您可能还会发现这有助于了解有关该主题的更多信息: How do browsers pause/change javascript when tab or window is not active?
此外,如果这接近最终结果,您也可以使用 CSS 来实现。
【讨论】:
我迷路了。所以我只给它一个 setInterval 和 1 秒?我读了这篇文章,但我不是一个大的 java 脚本程序员,所以有点难以理解。以上是关于动画播放状态在 Safari 上不起作用的主要内容,如果未能解决你的问题,请参考以下文章
视频循环自动播放在 Chrome/safari 上不起作用(webkit 错误)