在非活动窗口后赶上CSS动画[重复]答案

【问题标题】：Catch up on CSS animation after inactive window [duplicate]在非活动窗口后赶上CSS动画[重复]
【发布时间】：2017-08-01 07:09:18
【问题描述】：

我有一个倒计时计时器，呈条形，宽度会慢慢减小。

检查以下代码：

HTML

<div id="timer"><span></span></div>

CSS

#timer {
    height: 30px;
    display: block;
    overflow: hidden;
    background: grey;
}

#timer span {
    width: 100%;
    height: 100%;
    display: block;
    background: green;
    -webkit-animation-name: decreasewidth;
    animation-name: decreasewidth;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 20000ms;
    animation-duration: 20000ms;
}

@keyframes decreasewidth {
    to { width: 0% }
}

@-webkit-keyframes decreasewidth {
    to { width: 0% }
}

遗憾的是，当页面不使用时，动画会停止，例如。浏览另一个选项卡或窗口。我知道这在浏览器中很常见，有助于节省处理能力。

问题是，我希望我的计时器准确无误。这意味着即使用户在此期间轻弹到其他选项卡，也要保持其位置不变。我将如何实现这一目标？

起初，我的想法是计算用户离开页面的毫秒数，然后在返回时相应地更新计时器的跨度。但这只会发生在 focus 事件上，它依赖于用户活动。

我还尝试了一个很好的 ol' javascript setInterval 技术，它只是每秒更新跨度的宽度。这不仅看起来很糟糕——同样的问题也发生了。大多数浏览器会在不活动时增加间隔时间。

有兴趣听听有关如何处理此问题的一些想法。

TL;DR

我需要一个动画倒计时条，即使页面处于非活动状态，它也能保持其位置不变。

编辑

我知道这在 Safari 中很明显。

【问题讨论】：

在选项卡未激活时存储cookie或本地存储中的时间，然后一旦他们单击它，请从保存中加载值。 span>
你遇到过同样的问题吗？ stackoverflow.com/questions/5927284/…

标签： javascript jquery css

【解决方案1】：

使用标准的 CSS 过渡和一行 jQuery 怎么样？

您可以从 100% 开始加载栏，宽度过渡为 20 秒。然后，当页面加载时，添加一个覆盖宽度并将其设置为 0 的类。由于我们的转换，它将在 20 秒内从 100% 减小到 0%。

这是JSFiddle。

$(document).ready(function() {
    setTimeout(function() {$("#timer span").addClass("load");}, 1);
});

#timer {
    height: 30px;
    display: block;
    overflow: hidden;
    background: grey;
}

#timer span {
    height: 100%;
    display: block;
    background: green;
    transition: 20s width linear;
    width: 100%;
}

#timer span.load{
        width: 0%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="timer"><span class="init"></span></div>

【讨论】：

顺便说一句，Chrome 似乎不那么苛刻。当窗口没有聚焦时，Safari 将完全停止动画。
这个解决方案在 Safari 中的行为是否如此？
是的，在 Safari 中试试 codepen.io/anon/pen/OppqOY。
不幸的是我不能。我在 Windows 上，Safari 几年前就停产了。
我不认为引入 jquery 有帮助。 OP正在询问CSS。我有类似的情况，jquery 不是一个选项。

【解决方案2】：

看起来页面可见性 API 与缺席时间计算配对可以做到这一点。文档可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

当窗口可见/不可见时触发事件，您无需单击页面即可检测到它。正是我需要的。

IE 10+ 介意。虽然，这对我的应用程序来说不是问题：p

【讨论】：