knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

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');
});