js控制动画暂停、开始及js外部样式和style属性的添加移除

最新推荐文章于 2024-01-05 13:24:17 发布

青樱酱

最新推荐文章于 2024-01-05 13:24:17 发布

阅读量1.7w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： js 文章标签： css 动画 javascript

本文链接：https://blog.youkuaiyun.com/u012063507/article/details/66968940

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用JavaScript控制CSS动画的播放状态，包括暂停和继续动画效果。通过修改元素的animation-play-state属性实现对动画的控制，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画效果主要是css的animation属性：http://www.runoob.com/cssref/css3-pr-animation.html

即动画的暂停和继续是修改属性：

animation-play-state

而js中修改style属性的方法，可以参考这篇文章写的：

js外部样式和style属性的添加移除

文章中提到了修改的方法，即：

对于含有中划线的css属性，将每个中划线去点并将每个中划线后的第一个字母大写，通过style.改写后的属性名访问。如：obj.style.borderBottom = "";//清空border-bottom属性
所以修改style的animation-play-state的方法：

 document.getElementById("loading").style.WebkitAnimationPlayState

这里的动画css:

.loading {
  position: relative;
  width: 0;
  padding: 20px;
  background:
   linear-gradient(rgba(0,102,205,1) 30%, transparent 30%, transparent 70%, rgba(0,102,205,.4) 70%),
   linear-gradient(to left, rgba(0,102,205,.2) 30%, transparent 30%, transparent 70%, rgba(0,102,205,.8) 70%);
  background-repeat: no-repeat;
  background-size: 10% 100%, 100% 10%;
  background-position: 50% 0%, 0 50%;
  
  -webkit-animation: loading .7s infinite steps(8); /*绑定的关键帧名称 动画时间 动画循环次数 */
  animation: loading .7s infinite steps(8);
}

html:

 <div id="loading" class="loading"></div>

<p align="center">
                            <input  type="button" class="btn btn-default" value="暂停"   onclick ="loadingStop()" />
                            <input  type="button" class="btn btn-default" value="继续"   onclick ="loadingStart()" />
                        </p>

对应的js：

 /*暂停扫描按钮*/
 function loadingStop(){
     document.getElementById("loading").style.animationPlayState = "paused";
     document.getElementById("loading").style.WebkitAnimationPlayState = "paused"; // 针对 Chrome 和 Safari 的代码
 }
 /*继续扫描按钮*/
 function loadingStart(){
     document.getElementById("loading").style.animationPlayState = "running";
     document.getElementById("loading").style.WebkitAnimationPlayState = "running"; // 针对 Chrome 和 Safari 的代码
 }