《JavaScript》CSSアニメーションが終わったタイミングを補足する

CSSのtransitionプロパティ と@keyframeを利用した手軽なアニメーションは、実装することがおおいです。

これらのアニメーションが終わったタイミングを補足して、そのあと何かしたいときのスクリプトです。
以下のコードは、jQueryに依存してます。

var transitionEnd = 'oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend',
    animationEnd = 'webkitAnimationEnd oanimationend msAnimationEnd animationend',
    $yourElement = $('#elememt');

$yourElement.on(transitionEnd, function() {
  $(this).addClass('is-transition-end');  // transition の終了後の処理
});
$yourElement.on(animationEnd, function() {
  $(this).addClass('is-animation-end');  // keyframe animation の終了後の処理
});

transitionが終わったよ、@keyframe終わったよ、ということを表すキーワードを変数に格納して.on()に渡しています。

ぼくはいつもこのキーワードをスクリプトの最初に、変数に格納するようにして使い回しています。

おわります。