html - CSS3 トランジションが実行されているかどうかを確認する

Question

要素が現在 CSS3 トランジションでアニメーション化されているかどうかを Javascript で検出する方法はありますか?

「transitionstart」イベント (「transistionend」イベントと同等) も機能しますが、仕様で言及されていません。

Answer 1

まあ、transitionend イベント ( http://www.w3.org/TR/css3-transitions/#transition-events )しかないので、何か醜いことが頭に浮かびます。

http://jsfiddle.net/coma/psbBg/6/

JS

$(function() {

    var div = $('div');
    var property = div.css('transition-property');
    var lastValue = div.css(property);

    setInterval(function() {

        if(lastValue !== div.css(property)) {

            console.log('changed!');

        }

        lastValue = div.css(property);

    }, 10);

});

カスタム イベントを実装したり、適切なトランジション プロパティ (複数可) を取得したり、その他のアイデアを追加したりして、改善することができますが、全体像はわかりましたか?

元の問題を解決するには、別の道を歩む必要があるかもしれません...