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)

講的很粗糙，有不正確的地方請多指教