暂停 CSS @keyframes 动画
前端精髓
共 916字,需浏览 2分钟
·
2021-01-23 20:58
让我们了解一下 CSS @keyframes 动画,关于如何暂停和控制动画的方法。有一个专门用于它的 CSS 属性,也可以使用 JavaScript 进行控制,但是细节上有很多细微差别。
我注意到一些以前从未想过的事情,当前不在视口中的动画仍在运行!但这些播放的动画仍然使用 CPU / GPU!它们消耗了不必要的处理能力,从而降低了页面的其他部分的速度。
在 CSS 中真正暂停动画的唯一方法是使用 animation-play-state
带有 paused
值的属性。
.paused {
animation-play-state: paused;
}
在JavaScript中,该属性为 animationPlayState
,其设置如下:
element.style.animationPlayState = 'paused';
我们可以通过读取的当前值来创建一个播放和暂停动画的切换开关 animationPlayState
:
const running = element.style.animationPlayState === 'running';
然后将其设置为相反的值:
element.style.animationPlayState = running ? 'paused' : 'running';
暂停动画的另一种方法是设置 animation-duration 为 0s。动画在技术上仍在运行,但是由于没有持续时间,因此您将看不到任何动作。
我们可以完全删除动画,通过 animation: none 真正暂停动画。
.remove-animation {
animation: none ;
}
总结:为了性能优化,常常在页面离开的时候需要暂停动画,如果是 CSS @keyframes 动画,通过 animation-play-state 来暂停动画执行。
评论