3

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 )
Trevor Reid
  • 3,310
  • 4
  • 27
  • 46
Mark
  • 16,906
  • 20
  • 84
  • 117

1 Answers1

4

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.

drinchev
  • 19,201
  • 4
  • 67
  • 93
  • timeOuts should be avoided as much as possible, since when the DOM has a hart time processing an object the animation can start later then the timeOut, thus the timeOut will be complete sooner. – Mark Apr 22 '12 at 09:54
  • Javascript works async, so you should not worry about this too much if you've set the timeout correctly. Infact a lot of transition javascript plugins, as `jquery.transit` are using timeout callback as a backup if `webkitTransitionEnd` doesn't fire. Look at the source code of jquery.transit and you'll be thrilled! – drinchev Apr 22 '12 at 09:58
  • The code is enormous for just transition but I will look more into it, also using your helper (thanks for that). The problem occurs when trying to resize a very large image to a small div, the process time is not noticeable on pc's but on smartphones and iPads it takes a certain amount of time, while the async timeout is already running. Meaning the timeout will end sooner then the animation (again on the iPad). That's why I rather rely on the webkitTransitionEnd (I assume that if webkitTransition is available the event will be as well). – Mark Apr 22 '12 at 10:04
  • Well it is a big problem of managing transitions working well with javascript. I recently found a post of John Resign ( the author of jQuery ) [http://ejohn.org/blog/css-animations-and-javascript/], who states that there is no way to find out when a transition/animation starts or the state of it when it has been started already. It will need more thinking/testing to manage this in your code. – drinchev Apr 22 '12 at 10:11