jQueryでCSSのtransitionの終了を検知する方法

CSSでtransitionを使って楽にアニメーションできるようになったのはいいが、ゴリゴリのjQueryに絡ませるとアニメーションの終了を検知する必要があったりするので、その方法を調べてみました。

検知する方法

サンプル

青いボックスをクリックすると、ボックス上に「開始」のテキストが表示されるのと同時にボックスがフェードアウト。
フェードアウトが終了すると、ボックス上に「終了」のテキストが表示されるようになっています。

ソースコード

HTML

<body>
    <div id="msg"></div>
    <div id="box"></div>
</body>

CSS

#msg {
    height: 1em;
    padding-bottom: 1em;
}

#box {
    width: 100px;
    height: 100px;
    background: #007AFF;
    transition: all 3s;
    cursor: pointer;
}
#box.active {
    opacity: 0;
}

JavaScript

$(function() {
    var transitionEndEvents = [
        "webkitTransitionEnd",
        "mozTransitionEnd",
        "oTransitionEnd",
        "transitionend"
    ];
    var transitionEnd = transitionEndEvents.join(" ");
 
    $("#box").on(transitionEnd, function() {
        $("#msg").text("終了");
    });
     
    $("#box").on("click", function() {
        $("#msg").text("開始");
        $(this).toggleClass("active");
    });
});

解説

transitionの終了検知は、「transitionend」のイベントを取得します。
基本的な書き方は以下の様になります。

$("要素").on("transitionend", function() {
    // 処理
});

しかしブラウザによって実装が異なるようなので、各ブラウザのイベント名を列挙した書き方になります。

$("要素").on("webkitTransitionEnd　mozTransitionEnd　oTransitionEnd　transitionend", function() {
    // 処理
});

サンプルではこんな書き方しています。

var transitionEndEvents = [
    "webkitTransitionEnd",
    "mozTransitionEnd",
    "oTransitionEnd",
    "transitionend"
];
var transitionEnd = transitionEndEvents.join(" ");

$("要素").on(transitionEnd, function() {
    // 処理
});