css - 当浏览器选项卡暂停时，如何防止 CSS 动画暂停

Question

我有移动线动画，由 CSS 提供支持：

.line {
    transition: all 30s cubic-bezier(0, 0, 0, 1);
    transform: translate3d(-1000px, 0px, 0px);
}

这条线在 X 轴上移动了 30 秒到 -1000 像素。

问题：
当我将浏览器选项卡切换到其他网站时，带有此动画的选项卡上的动画可以设置为暂停，但是当我返回带有此动画的选项卡时，动画恢复了。

我需要的行为：
当用户切换浏览器选项卡时，我需要让动画不断移动而不会暂停。

标签： cssanimation

Answer 1

如果我理解正确，那么您需要在用户离开浏览器的当前选项卡后继续动画。该visibilitychange活动将对此有所帮助。我在下面制作了通常的示例代码，但您需要为您的任务自定义此代码。

我还指定line.style.animationPlayState = 'running'- 正是在这个条件下，动画的逻辑继续。

let line = document.querySelector('.line');

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState == 'hidden') {
        line.style.animationPlayState = 'running';
  } else {}
});