为一个元素添加一个动画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动画停止
当你把动画设置无限的时候,用什么方法把他停止在当前画面呢










