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

本文链接：https://blog.csdn.net/u012063507/article/details/66968940

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

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

animation-play-state

而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 的代码
 }