css3动画监听以及暂停

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css3动画监听以及暂停，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1857字，纯文字阅读大概需要3分钟。

内容图文

为一个元素添加一个动画class之后你还在用settimeout来延迟下一个动作了，你out啦下面这些绝对是装逼的知识点。

1.animation动画监听

-webkit-animation动画其实有三个事件：
开始事件 webkitAnimationStart
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration

dom.addEventListener("webkitAnimationStart", function(){ //动画开始时事件 
    console.log("start"); 
}, false); 
dom.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件 
    console.log("end"); 
}, false); 
dom.addEventListener("webkitAnimationIteration", function(){ //动画重复运动时的事件
    console.log("end"); //第一遍动画完成

输出end }, false);

2.transition动画监听

this动画只有webkitTransitionEnd这一个事件

dom.addEventListener("webkitTransitionEnd", function(){
    console.log("end");
}, false);

ps以上都没有做兼容的处理

这样我们就可以用很少的settimeout来做连贯的动画效果了,但是同一个元素的多个动画效果可能需要嵌套，想了想如果同一个元素为啥不直接在一个animation里都完成呢，这个可能要具体情况具体分析了

3.animation动画停止

当你把动画设置无限的时候，用什么方法把他停止在当前画面呢

<style type="text/css">
.love {
    display: block;
    width: 100px; height: 100px;
    background: url(http://www.zhangxinxu.com/study/201512/web_heart_animation.png) 0 0 no-repeat;
    background-size: 2900%;
    animation: heart-burst steps(28) 0.8s infinite both;
}//图片背景的动画    
.stop {
    animation-play-state: paused;
}
@keyframes heart-burst {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
</style>

<i id="testImg" class="love"></i>
<p><input type="button" id="testBtn" value="暂停"></p>

<script type="text/javascript">
    var image = document.getElementById("testImg"), 
    button = document.getElementById("testBtn");
    
    if (image.classList && image && button) {
        button.onclick = function() {
            if (this.value == '暂停') {
                image.classList.add('stop');
                this.value = '播放';
            } else {
                image.classList.remove('stop');
                this.value = '暂停';
            }
        };
    }    
</script>

内容总结

以上是互联网集市为您收集整理的css3动画监听以及暂停全部内容，希望文章能够帮你解决css3动画监听以及暂停所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---