聊聊CSS动画的监听

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了聊聊CSS动画的监听相关的知识,希望对你有一定的参考价值。

参考技术A 还记得许多年前,我们为一个元素添加有一个动画class之后,你还在用settimeout来延迟下一个动作,这么做过时啦。
哪怎么做呢。
不是添加了一个类么,哪动画结束以后来执行这个动作呗。
哪么动画有两种,还是要区别对待的。
1.animation
2.transition

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

嗯 对 就是这么简单 后面的实际用例我会附上
待更新中。。。
这篇文章写出来以后,朋友反馈过来有兼容性问题。
ios9一下和安卓4.4一下是不支持的。
因为现在大多数项目技术栈是vue,这里我就推荐使用vue的过渡钩子函数beforeLeave来解决这个问题,关于vue过渡常见的用法和解惑我会单独开一篇文章去写这个东西。
其他比较好的解决方案还是使用setTimeout去解决这个问题。

https://developer.mozilla.org/en-US/docs/Web/Events/transitionend

注意:每个启用TransitionCSS属性的分别对应独立的transitionend事件

css3动画监听以及暂停


为一个元素添加一个动画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>


原文链接: http://azq.space/blog/css3-anm-addEventListener/




>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


<<<< 每日推荐 <<<<


==========阅读原文==========




以上是关于聊聊CSS动画的监听的主要内容,如果未能解决你的问题,请参考以下文章

CSS聊聊animation

css3动画监听以及暂停

聊聊CSS 缓动函数的新成员linear()

CSS3动画

如何使用 jQuery 同步 CSS3 动画事件和事件监听器

多彩的网页CSS动画详解