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アニメーションの終了判別をする際にぜひ。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner