jQueryでCSS3アニメーションの終了のタイミングを取得する方法
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
こんにちは。Toshikuraです。今回のTipsは【jQueryでCSS3アニメーションの終了のタイミングを取得する方法】です。先日【CSS3でアニメーション【番外編】- CSS3アニメーションで動作するjQueryスライダーを作ってみる!】という記事を書きましたがその更なる続編になります。jQueryではアニメーション終了のタイミングをanimate({},function(){~~~})やanimetedで取得できますが、CSS3でのアニメーションでは少し記述が異なります。
- 【vol.1】- とりあえずはじめの一歩。
- 【vol.2】- ホバーでアニメーション実行 & 複数アニメーションの組み合わせ方法
- 【vol.3】- イージングを生成してくれる便利なジェネレーター
- 【vol.4】- クリックでアニメーションを実行させる方法(複数同時実行例含む)
- 【vol.5】- ちょっと複雑なアニメーションを作ってみる。
- 【vol.6】- CSS3アニメーションで動作するjQueryスライダーを作ってみる
実装方法
jQueryのbindやon,one等でCSS3の終了イベント(transitionend)にコールバック関数を紐づけ実装可能です。念のためjQueryのみでのアニメーション終了の取得も併記しておきますので色々試してみると面白いかもしれません。
CSS3
$(“#ID”).bind(“oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend”,function(){
console.log(‘animated!’);
});
jQuery
$(“#ID”).animate({‘width’:’800px’},1000,function(){
console.log(‘animated!’);
});