CSSアニメーションのコールバックを簡単に済ませる方法を考える

CSSアニメーションはJavaScriptでのアニメーションと違いハードウェアの恩恵を受けれるので非常に負荷も軽くかつなめらかに動かせるという利点はあるものの、こいつはこいつでJavaScriptとの連携を取るに当たっては少々面倒な手段を取らざるを得ない事が度々御座います。

そんなわけで書いてみたのがこれ。深夜の3分間クッキングにふさわしい、たった11行の、まるで卵かけご飯を料理と言い張るようなシロモノです。

なんの事ありません。たったこれだけの事です。

(function($){
    $.fn.animateCallback = function(callback){
        var alias = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd"
            return this.each(function() {
                $(this).bind(alias, function(){
                $(this).unbind(alias);
                return callback.call(this)
            });
        });
    };
})(jQuery);

引数はcallbackのみです。シンプルです。要素のイベントハンドラ、animationEndにさくっとcallbackとその実行の直前にイベントハンドラの中身を空にするようにしているだけです。

なんか書きがちな処理なんですが、毎度毎度こんなの書いてるのも面倒なので。これどっかに置いておけば、アニメーション終了後にアニメーションさせるclassを消すって処理はこんな感じにできます。

$("#button").bind("click",function(){
    $("#testTarget").animateCallback(function(){
        $("#testTarget").removeClass("doAnimate")
    }).addClass("doAnimate")
});

以上、深夜の3分間クッキングですた。

追記 : callbackにthisを用いてないのは、スコープがその上のclickイベント基準になってるからな訳ですが、この辺りbind同様にthisをそのオブジェクト基準にさせんのってどうしたら良いんでしょ。私はゆるふわガーリーなのでよく知りません。

解決 : @tektoh氏が ”return callback.call(this); でどうでしょう” と答えをするっと出してくれマスタ。なるほど、こうやればいいのか。無知は晒しとくもんだね！助かりマスタ。