Check if CSS3 transition is running

Question

Is there a way to detect in my Javascript if an element is currently being animated with a CSS3 transition?

An "transitionstart"-event (equivalent to the 'transistionend' event) would also work out, but I can't find any mention of it in the specification.

Answer 1

Well, since there is only a transitionend event (http://www.w3.org/TR/css3-transitions/#transition-events) something ugly comes to my mind:

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

});

It can be improved implementing custom events, taking care of getting the correct transition property (or properties), and more ideas, but you get the picture right?

Maybe you need to take another path on solving your original problem...