CSS
JavaScript
animation

CSSのAnimationとTransitionの終了イベントのPolyfill

古いiOSやAndroidのブラウザで animationend のイベントが発火せず、 animationendwebkitAnimationEnd の両方を指定すると、別のブラウザで2回発火してしまったりした事が以前にあったので、そのときのメモです。それぞれのプロパティが存在するかを確認して、対応している名前を別の変数で持っておきます。

Can I Useを見た感じだと、iOS8以下とAndroid4.4以下では webkit のプレフィックスがいるっぽい。もう使う機会はないかもしれないけれど。

// ※ Babel前提なので、そうでない場合は書き換えてください!
{
  const findProperty = obj => {
    const el = document.createElement('div')

    for (let key in obj) {
      if (obj.hasOwnProperty(key) && el.style[key] !== undefined) {
        return obj[key]
      }
    }
  }

  window.transitionEnd = findProperty({
    transition: 'transitionend',
    MozTransition: 'transitionend',
    WebkitTransition: 'webkitTransitionEnd'
  })

  window.animationEnd = findProperty({
    animation: 'animationend',
    MozAnimation: 'mozAnimationEnd',
    WebkitAnimation: 'webkitAnimationEnd'
  })
}

const hoge = document.getElementById('hoge')

hoge.addEventListener(transitionEnd, () => {
  // do something
})

hoge.classList.add('is-active')

// アニメーションも同じ感じで

Codepen

See the Pen transitionend & animationend Pollyfill by noplan1989 (@noplan1989) on CodePen.