gpt4 book ai didi

javascript - 在非事件窗口后 catch CSS 动画

转载 作者:行者123 更新时间:2023-11-29 15:22:15 25 4
gpt4 key购买 nike

<分区>

我有一个倒数计时器,采用条形样式,宽度逐渐减小。

检查以下代码:

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 技术,它每秒更新一次跨度的宽度。这不仅看起来很糟糕 - 还发生了同样的问题。大多数浏览器会增加不活动时的间隔时间。

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

长话短说

我需要一个动画倒计时计时器栏,即使在页面处于非事件状态时它也能保持其位置。

编辑

我知道这在 Safari 中很明显。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com