CODEWITHSUNDEEP
htmlcsscss-transitions
johnny
johnny

Reputation: 9036

Check if CSS3 transition is running

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.

Upvotes: 5

Views: 3798

Answers (1)

coma
coma

Reputation: 16649

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...

Upvotes: 2

Related Questions