TAGS :, ,

jQueryなどでアニメーションを実装した際には
アニメーション終了時に処理を実行させるのは比較的簡単なのですが
CSSアニメーション制御の場合は少々面倒だったりします。

そんなCSSアニメーションの終了イベントを取得してくれるJavaScript
「Detecting CSS Animation and Transition End with JavaScript」が
とても便利そうだったのでご紹介。

Detecting CSS Animation and Transition End with JavaScript – Osvaldas Valutis


Detecting CSS Animation and Transition End with JavaScript – Osvaldas Valutis
デモページはこちら

スクリプトはjQueryで使用するパターンと
jQueryに依存せずにJavaScriptのみで実装するパターンが用意されています。

jQueryで使用する場合は「jquery.oncssanimationend.js」
そうでない場合は「oncssanimationend.js」を読み込んで
どちらの場合でも
・【onCSSAnimationEnd】でAnimations終了の判別
・【onCSSTransitionEnd】でTransitions終了の判別
をそれぞれイベント設定して実装する構成のようです。

使用例は下記のようになっています。

◆jQueryの場合
$(セレクタ).addClass('●●●●').onCSSAnimationEnd(function(){
	～ここにCSSアニメーション終了後の処理を記述～
});

◆JavaScriptの場合
var item = document.querySelector(セレクタ);
item.classList.add('●●●●');
item.onCSSAnimationEnd(function(){
	～ここにCSSアニメーション終了後の処理を記述～
});

このようにCSSアニメーションを設定したCSSクラス「●●●●」を
対象セレクタに追加した後に「onCSSAnimationEnd」を設定して
CSSアニメーション終了後の処理を記述します。
※Transitions終了の判別は【onCSSAnimationEnd】の部分が【onCSSTransitionEnd】になります。

CSSアニメーションの終了判別がとてもシンプルに使えるので
とても便利に使えそうです。

因みにこのJavaScriptを使用せずに
CSSアニメーションの終了判別をやろうとすると以下のように。

◆jQueryの場合
$(セレクタ).addClass('●●●●').on('webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend',function(){
	～ここにCSSアニメーション終了後の処理を記述～
});

参考までにCSSアニメーションではなく、
jQueryアニメーションの終了判別をするには、、、

【参考】jQueryでアニメーション処理（「.animate()」）完了後に別の処理を実行させる方法

以上がCSSアニメーションの終了判別をするJavaScriptの紹介でした。

CSSアニメーションの終了判別をする際にぜひ。。。