标签搜索
隐藏侧边栏

5种暂停动画的方式,你都会?

搞前端的半夏
2022-04-22 / 0 评论 / 0 点赞 / 181 阅读 / 2,101 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-22,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信: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";
      });

上效果:

click.gif

每次暂停开始都能记住上次的位置,效果还是不错的。

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>

效果:

csshover.gif
但是这种方式实现的效果是不符合预期的,你想要暂停的话,必须一直把鼠标放在对应的元素上。

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。
效果

click.gif

基本上和JS一样

设置持续时间

另一种暂停动画的方法是设置animation-duration为0s. 动画实际上正在运行,但由于它没有持续时间,看不到任何动作。

当然这个属性跟animation-play-state一样,你也可以利用上面的三种方案来进行设置。

input:checked ~ .#divAnimation {
      animation-duration: 0s;
    }

效果:

持续0s.gif

不过这种方式并不是本质上的暂停动画。效果也比较差,每次动画重新开始,都要从初始位置开始,并不会记住上一次的位置。

animation: none;

我们可以完全可以利用none来删除动画。

input:checked ~ .#divAnimation {
      animation: none !important;
    }

持续0s.gif

效果是设置时间为0秒一样。

0

评论区