TransitionEnd Event not firing?

Question

I have multiple elements that are animating at a (somewhat) duration each. I'm animating using CSS3 transitions, using the jQuery library and a transitionend helper function from David Walsh.

My issue is that the transitionEnd event is NOT being fired! (In Chrome & Firefox)

My code:

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 whichTransitionEvent variable points to a self-executing function that returns a string containing the event name:

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"

what's the value of `whichTransitionEvent` variable? In which browser does it work? — Fabrizio Calderan, Sep 03 '12 at 15:07
As it says in the question I've tested in Chrome and Firefox. Look at the link for the source of the whichTransitionEvent (it is a function that determines the transitionend event name based on the browser) — xyhhx, Sep 03 '12 at 15:17
Did you know transitionend isn't supposed to always fire? see: http://stackoverflow.com/a/16324877/261114 — Quickredfox, May 01 '13 at 19:22

score 19 · Answer 1 · edited Jun 20 '20 at 09:12

19

Don't confuse 'transitions' with 'animations'.

CSS animations have different callbacks.

Here's the callbacks for animation:

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 31 '15 at 02:33

Simon_Weaver

140,023
84
646
689

1

Thanks, been scratching my head over this for a while. Good to know! – Scott L May 10 '16 at 15:48
these events may be out of date now - been a long time – Simon_Weaver Mar 08 '18 at 17:32
1

@Simon_Weaver These do still work. I am using the animationend and is working in Chrome. Check here for up-to-date compatibility uses - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event#Browser_compatibility – Sambuxc May 15 '20 at 08:51

score 8 · Accepted Answer · edited Feb 29 '16 at 21:14

Attempting to replicate this in Chrome 29 and Firefox 23, your original function failed in the same way, i.e. I'm seeing console.log(whichTransitionEvent) returning 'transitionEnd' for both.

Re-ordering the elements within the transitions hash fixes the issue, suggesting both have the unprefixed standards property as well as their own prefixed one.

Refactored function below, which fires the correct 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

score -1 · Answer 3 · answered Sep 03 '12 at 18:27

-1

You are passing a function instead of a string, so you're doing the equivalent of...

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

To fix this I'd recommend setting the string at the beginning of your script, so it doesn't get 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');
    });

}

answered Sep 03 '12 at 18:27

methodofaction

70,885
21
151
164

Actually, I'm not passing a function. I wasn't clear when I first wrote the question but I actually returned a string value to the whichTransitionEvent variable – xyhhx Sep 12 '12 at 03:19
So if you do alert(transitionEnd) what does it output? – methodofaction Sep 12 '12 at 16:21
webkitTransitionEnd in Chrome – xyhhx Sep 13 '12 at 13:49

TransitionEnd Event not firing?

3 Answers3

Don't confuse 'transitions' with 'animations'.

Linked