Encoding with webkitTransitionEnd

Question

I am encoding a web application (for iPad) that uses the webkitTransitionEnd event.

I want to call a function when the second transition is completed. The reason that two transitions occur is because one has the -webkit-transition-delay property, so the two animations do not end at the same time. Since this is a series of animations, I want to call the function only after the second transition is completed.

My current (stupid) workaround is to bind an event inside an event that looks something like this in jQuery.

 $(this).bind('webkitTransitionEnd', function(){ $(this).bind('webkitTransitionEnd', function(){ \*some code here*\ $(this).unbind(); }); $(this).unbind(); }); 

This works, but it cannot be used when there are more animations. Let's say if I want to call a function after 50 animations that ends at different times.

Answer 1

This is not tested, but should give you a good idea.

 function waitOnTransition(elem, endIndex, callback){ var transitionIndex = 0; $(elem).on('webkitTransitionEnd', function(){ if(transitionIndex == endIndex){ callback(); }else{ transitionIndex++; } }); } waitOnTransition('#elemID', 3, function(){ //do stuff }); 

You can also do this with curry

 function makeTransitionEnd(endIndex){ var endIndex = endIndex; var out = function(elem, callback){ var transitionIndex = 0; $(elem).on('webkitTransitionEnd', function(){ if(transitionIndex == endIndex){ callback(); }else{ transitionIndex++; } }); }); return out; } //make curry var waitForThreeEnds = makeTransitionEnd(3); waitForThreeEnds('#elemID', function(){ //do stuff });