transitionのコールバックを実装する
transitionが終了したら実行されるようにしたい
CSS3のプロパティであるtransitionを用いてアニメーションをさせるとき、transition終了時にコールバックを実装したいときがあります。
jQueryのanimateメソッドならば、簡単にコールバック関数を指定できるのですが、transitionを用いた場合はどのようにコールバックを実装したらよいでしょうか。
スタイルシート上では設定できませんが、JavaScriptにて制御ができます。 transitionendというイベントにバインドさせることで、それが可能です。
下記は、水平方向に300px移動した後にアラートを出力するプログラムです。(ベンダープレフィックスを取得するgetPrefix関数を独自に作成していると仮定します)
/* ベンダープレフィックスを得る */ var prefix = getPrefix(); /* cssメソッドにわたすスタイルを格納 */ var animObj = {}; animObj[prefix + 'transform'] = 'translate3d(300px, 0px, 0px)'; animObj['transition'] = prefix + 'transform 400ms swing'; /* アニメーション */ $(ELEMENT).css(animObj); /* transition終了時 */ $(ELEMENT).on('transitionend', function(){ alert('moved'); });
このイベント、ブラウザによって実装が異なるため、より確実にバインドしたいならば、以下のように各ブラウザでのイベント名を列挙してしまったほうが無難です。
webkitTransitionEnd MozTransitionEnd mozTransitionEnd msTransitionEnd oTransitionEnd transitionEnd transitionend
ちなみに、別の文脈において同じ要素に複数transitionが指定されているときは注意が必要です。
他の文脈でtransitionが終了したときも同じ処理が実行されてしまうため、以下のようにコールバック処理の中でいちどアンバインドさせてください。
/* ベンダープレフィックスを得る */ var prefix = getPrefix(); /* cssメソッドにわたすスタイルを格納 */ var animObj = {}; animObj[prefix + 'transform'] = 'translate3d(300px, 0px, 0px)'; animObj['transition'] = prefix + 'transform 400ms swing'; /* アニメーション */ $(ELEMENT).css(animObj); /* transition終了時 */ $(ELEMENT).on('webkitTransitionEnd MozTransitionEnd mozTransitionEnd msTransitionEnd oTransitionEnd transitionEnd transitionend',function(){ alert('moved'); $(this).off('webkitTransitionEnd MozTransitionEnd mozTransitionEnd msTransitionEnd oTransitionEnd transitionEnd transitionend'); });