CSS事件

transitionend

当一个 CSS 动画完成时触发，每一个改变的属性都会分别触发一次

用于在动画结束后执行某种操作，也可以用它来串联动画

属性

event.propertyName：当前完成动画的属性，这在我们同时为多个属性加上动画时会很有用

event.elapsedTime：动画完成的时间（按秒计算），不包括 transition-delay

document.addEventListener('transitioned', function(event){
  console.log(event.propertyName)
})

transitionstart

transitionrun

早于 transitionstart

transitioncancel

document.addEventListener('transitionstart', function(event) {
  console.log(event.target.tagName, 'transitionstart')
})
document.addEventListener('transitionrun', function(event) {
  console.log(event.target.tagName, 'transitionrun')
})
document.addEventListener('transitionend', function(event) {
  console.log(event.target.tagName, 'transitionend')
})
document.addEventListener('transitioncancel', function(event) {
  console.log(event.target.tagName, 'transitioncancel')
})