Javascript 对 CSS3 animation 动画的流程的简单控制

CSS3的animation是一个好东西，能让页面动画更加纯净流畅，可是以前一扯到动画流程的控制（好比执行完第一个动画后再执行第二个动画在执行某个动做）就有点懵逼

若是是jQuery动画呢，有回调函数（或者.promise().done()），方便滴狠呐！可是animation 呢。。呢。。。呢。。。。呢。。。。。呢。。。。。。

粗粗的想想吧，貌似给元素加上第一个动画的类后根据第一个动画的执行时间来设置个延迟再加入第二个动画的类也是能够实现的，可是总以为这样不干净，并且setTimeout其实也不是那么的可控，

而后塔哒，就遇到这篇文章你若触发，我就处理，讲的是JS事件响应的，对， 事！件！响！应！。若是动画结束时能有能触发某个事件，JS再监听响应一下，这不就完事儿了吗？

诶，万能的JS还真有

CSS动画事件 animationstart，animationend和animationiteration

看着三个事件名字就知道，这三个事件分别对应动画开始前，动画结束后，动画进行中，不废话了，直接上个demo

实现了个简单的删除动画，第一步让元素出视野，第二步让元素height和margin,paddind等都塌陷，最后直接移除元素

<script async src="//jsfiddle.net/waynecz/fd8yz8bh/embed/"></script>

有两个本身以为要注意的地方写下注释

on('.m1', 'animationend', function() {
  // this.classList获取的是一个DOMtokenList并非真的数组因此要转换一下
  var classlist = Array.prototype.slice.apply(this.classList);
  // 由于有两个动画，因此要断定是哪个动画结束了来执行下一阶段
  if (classlist.indexOf('dnone') == -1) {
    this.classList.add('dnone')
  } else {
    setTimeout(function() {
      this.parentNode.removeChild(this)
    }, 1000)
  }
})

on('button', 'click', function() {
  select('.m1').classList.toggle('leave');
})

function select(selector) {
  return document.querySelector(selector)
}

function on(selector, eventName, cb) {
  select(selector).addEventListener(eventName, cb);
}

这么一看其实也是很简单的哈哈,顺带一提起时transition过渡动画也有个事件transitionend。

最后，兼容性

1. CSS3动画相关属性的兼容性能够看这里

2. animation事件，通常只需加两种前缀就能够了
   webkit前缀：webkitAnimationStart
   MS前缀：MSAnimationStart (IE10+)
   好比

Object.prototype.perfixOn = function (eventName, cb) {
    var perfix = ['webkit', 'MS', '']
    for (var i = perfix.length - 1; i >= 0; i--) {
        if (perfix[i] != '') {
            eventName.replace(/^(\w)/, function ($1) {
                return $1.toUpperCase()
            })
        }
        this.addEventListener(perfix[i] + eventName, cb, false);
    }
}
Obj.perfixOn('animationend', cb)

讲的很粗糙，有不正确的地方请多指教