DeferredによるCSS・jQueryアニメーションの連続実行

cssjq
cssjq

修正:
jQueryアニメーションのところ、わざわざreturn d.promise()でなくてもanimate()はpromise()を返すのでそのままreturnでよかったです。

CSSアニメーションやjQueryアニメーション、さらにそれ以外の様々な動作を順番に実行するような処理を実装したいと思い、Deferredによる実装方法を試してみました。

AD

CSSアニメーションの完了を判断する方法

順番に動作させるためには「処理が完了した」ということを判定しないといけません。

CSSアニメーションは完了時にtransitionendというイベントが発火します。
※keyframeアニメーションの場合はanimationendというイベントになります。

このイベントに対してresolve()をバインドさせれば、Deferredにより連鎖的な処理を実装できそうです。

ちなみにjQueryのみの場合

jQueryアニメーションだけの場合はDeferredを使うことで簡単に実装できます。

過去記事もご参照ください(と言っても当時は思い切り間違ってたのでだいぶ恥ずかしい…)
Ajaxじゃなくても使える、$.Deferredで好きな処理を連鎖的に実行する方法

スターフィールド様のこちらの記事のほうがわかりやすいですね(;´∀`)
jQuery.Deferredでわかりやすく順番にアニメーションする方法

CSSアニメーション終了時にpromise()を返す

TransitionEndイベントはCSSアニメーション終了時に発火します(実装時にはベンダープレフィックスが必要です)。
このイベントにresolve()をバインドすることで、CSSアニメーション終了を伝達します。

これでthen()やwhen()など、jQuery.Deferredに関連する関数を使った処理が構築できます。

jQueryアニメーション終了時にpromise()を返す

CSSアニメーションと同じようなかたちで、アニメーション完了時にresolve()をバインドします。

デモ

デモはこちら

デモでは

1.CSSアニメーションで右に300px移動
2.CSSアニメーションで下に100px移動
3.jQueryアニメーションで左に200px移動
4.1秒静止し、色を#00fに変える。
5.CSSアニメーションで下に100px移動

という処理を順番に行っています。
アニメーション以外にsetTimeoutによる遅延処理(非同期なのでDeferredを使わないと次の処理が実行されてしまう)も加えました。

実践的な使いどころ

デモのようなアニメーションの構築はもちろんですが、たとえば

CSSによるローディング → Ajaxで外部データ取得 → jQueryアニメーションを伴って表示させる

といった感じで使えたらいいな、と思います。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。