WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

CSSアニメーションの終了イベントを取得してくれるJavaScript「Detecting CSS Animation and Transition End with JavaScript」

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終了の判別
をそれぞれイベント設定して実装する構成のようです。

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

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

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

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

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

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

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です