聊聊CSS动画的监听

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

animation动画监听

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

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

transition动画监听

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

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

补充

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

el.addEventListener("transitionend"
  , e => 
    {
      const pseudoElement = e.pseudoElement // 触发动画的伪类
          , propertyName = e.propertyName   // 发生动画的CSS属性
          , elapsedTime = e.elapsedTime     // 动画的持续时间
      // ..................
    })

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

/* 触发3个transitionend事件 */
transition: width 1s ease .6s,
            color .5s linear,
            background 2s ease-in-out;