大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!
前言
最近公司网站上线新的官网,上面飘着一个跑来跑去的小人,刚上线没多久,老板就提着到来砍我,"你要把这个小人累死吗?",当时我就不乐意了。
老板掏出了刀,我赶紧掏出了MDN,嘿,您猜怎么着,还真让我找到了, animation-play-state
,这属性那叫一个管用哦。
当然暂停动画不止这一种方案,其他的方案我们也会在本文讨论。
JavaScript 暂停动画
在 JavaScript 中,该属性是animationPlayState。
使用语法
element.style.animationPlayState = 'paused';
可以设定值有: running : 动 paused :暂停
举例
首先编写一个动画。 div从左往右移动
@keyframes toRight {
from {
margin-left: 0%;
}
to {
margin-left: calc(100% - 100px);
}
}
复制代码
定义一个div和一个暂停启动的按钮
因为使用id,所以代码比较简洁。
stopanimation.addEventListener("click", () => {
const running = divAnimation.style.animationPlayState || "running";
divAnimation.style.animationPlayState =
running === "running" ? "paused" : "running";
});
复制代码
上效果:
每次暂停开始都能记住上次的位置,效果还是不错的。
CSS :hover暂停
思路:直接在移动的元素上面定义一个hover事件,当hover的时候,将animation-play-state设置为 paused
#divAnimation:hover{
animation-play-state: paused;
}
<div id="divAnimation">animation: toRight 10s linear infinite;</div>
复制代码
当然可以也可以定义其他元素,把hover元素放在其他元素中,当hover的时候给移动的元素设置paused。
#divAnimation {
animation: toRight 10s linear infinite;
}
#stopanimation:hover ~ #divAnimation{
animation-play-state: paused;
}
<div id="stopanimation">暂停/动画</div>
<div id="divAnimation">animation: toRight 10s linear infinite;</div>
复制代码
效果:
但是这种方式实现的效果是不符合预期的,你想要暂停的话,必须一直把鼠标放在对应的元素上。
hover :checked暂停
因为:checked 状态可以被记录,类似鼠标点击的效果,也不需要一直把鼠标放在元素上,算是一种好的解决方案。不过会多增加两个元素哦!!
input:checked ~ .#divAnimation {
animation-play-state: paused;
}
<input type="checkbox" id="pausedOrRun" class="hidden data-animation-pause" />
<label for="pausedOrRun" >关闭/启动</label>
<div id="#divAnimation"></div>
复制代码
单击复选框时,动画在播放和暂停之间切换 - 不需要 JavaScript。 效果
基本上和JS一样
设置持续时间
另一种暂停动画的方法是设置animation-duration为0s. 动画实际上正在运行,但由于它没有持续时间,看不到任何动作。
当然这个属性跟animation-play-state
一样,你也可以利用上面的三种方案来进行设置。
input:checked ~ .#divAnimation {
animation-duration: 0s;
}
复制代码
效果:
不过这种方式并不是本质上的暂停动画。效果也比较差,每次动画重新开始,都要从初始位置开始,并不会记住上一次的位置。
animation: none;
我们可以完全可以利用none来删除动画。
input:checked ~ .#divAnimation {
animation: none !important;
}
复制代码
效果是设置时间为0秒一样。