5

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.

johnny
  • 8,696
  • 6
  • 25
  • 36
  • 1
    http://stackoverflow.com/questions/2794148/css3-transition-events , http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr ? – coma May 31 '13 at 21:19
  • 1
    This doesn't help much unfortunately, since the answers in the first link focus on "transistionend" and the second link just discusses feature detection for css3 transistions. :/ – johnny Jun 01 '13 at 11:05
  • did you find my answer useful? – coma Jun 02 '13 at 11:40

1 Answers1

2

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

coma
  • 16,429
  • 4
  • 51
  • 76
  • 2
    I think you meant to check for the 'transform'-property and not 'transistion', right? But I get the idea. It seems a bit brute-forced, but it's probably the only way to go. Thanks! – johnny Jun 02 '13 at 11:51
  • oh, thanks for point it out, now I'm using transition-property: http://jsfiddle.net/coma/psbBg/6/ – coma Jun 02 '13 at 11:53