TransitionEnd event not firing?

Question

I have several elements that are animated in (several) durations each. I am animating using CSS3 transitions using the jQuery library and the transitionend helper function from David Walsh .

My problem is that the transitionend event is NOT triggered! (In Chrome and Firefox)

My code is:

 var $children = $container.find('.slideblock').children(); if(Modernizr.csstransitions && Modernizr.csstransforms3d) { if($.browser.webkit === true) { $children.css('-webkit-transform-style','preserve-3d') } $children.each(function(i){ $(this).on(whichTransitionEvent,function () { $(this).remove(); }); $(this).show().css('animation','slideOutToRight ' + ((Math.random() / 2) + .5) + 's'); }); } 

Update

The variable whichTransitionEvent points to a self- whichTransitionEvent function that returns a string containing the name of the event:

 var whichTransitionEvent = (function (){ var t; var el = document.createElement('fakeelement'); var transitions = { 'transition' :'transitionEnd', 'OTransition' :'oTransitionEnd', 'MSTransition' :'msTransitionEnd', 'MozTransition' :'transitionend', 'WebkitTransition' :'webkitTransitionEnd' } for(t in transitions){ if( el.style[t] !== undefined ){ return transitions[t]; } } } ()); console.log(whichTransitionEvent); // returns "webkitTransitionEvent" in Chrome console.log(typeof whichTransitionEvent); // returns "string" 

Answer 1

Trying to repeat this in Chrome 29 and Firefox 23, your original function failed, i.e. I see console.log(whichTransitionEvent) returning 'transitionEnd' for both.

Reordering the elements in the transitions hash fixes the problem, assuming both have the unprefixed Standards property, as well as their own prefix.

The refactored function below that triggers the right events for me:

 function whichTransitionEvent(){ var t; var el = document.createElement('fakeelement'); var transitions = { 'WebkitTransition' :'webkitTransitionEnd', 'MozTransition' :'transitionend', 'MSTransition' :'msTransitionEnd', 'OTransition' :'oTransitionEnd', 'transition' :'transitionEnd' } for(t in transitions){ if( el.style[t] !== undefined ){ return transitions[t]; } } } 

Let me know if this helps.

Answer 2

Do not confuse "transitions" with "animations."

CSS animations have different callbacks.

Here's the callbacks for the animation:

  $(document).one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", "#robot", function (event) { // complete }); 

Answer 3

You pass a function instead of a string, so do the equivalent ...

 $(this).on(function(){...}, function() {...}) 

To fix this, I would recommend setting the line at the beginning of your script, so it is not called multiple times.

 if(Modernizr.csstransitions && Modernizr.csstransforms3d) { var transitionEnd = whichTransitionEvent(); if($.browser.webkit === true) { $children.css('-webkit-transform-style','preserve-3d') } $children.each(function(i){ $(this).on(transitionEnd,function () { $(this).remove(); }); $(this).show().css('animation','slideOutToRight ' + ((Math.random() / 2) + .5) + 's'); }); }