Is there a way you can check if a css transition will take place?

Question

I put a transition on an object using Javascript:

$(this).css('transition', 'all 1000ms');

And I listen to the transition end event:

$(this).on('webkitTransitionEnd', function() { alert('Transition did finish.'); });

The event is triggered and everything works as expected. However, when the element starts with left:100px and you try to animate it to left:100px the event is never triggered, which causes a problem. How would I fix this? I can't really check the value against the new values because

$(this).css('transform', 'scale(0.1)'); //only when object is being displayed will return matrix value

scale(0.5) does not equal matrix(0.5, 0, 0, 0.5, 0, 0 )

Answer 1

webkit-transition doesn't take place if your properties are equal, so webkitTransitionEnd will not be fired!

I made a helper to explain here : http://jsfiddle.net/JtLAX/

So you will have to find a different approach here for callback function.

You might want to add a setTimeout(function() {}, 1000), whenever the event that triggers the transition starts.

Or you could try this library, it is very efficient for managing transitions and setting callbacks :

http://ricostacruz.com/jquery.transit/

with it you could simply

$(this).transit({ left: '+=200' }, function() { alert('transition ends' } );

Regarding your main question :

Is there a way you can check if a css transition will take place?

IMHO, I think that the only solution is to check the attributes of the style element manually and compare them with the transition, which is very hard.