transitionend event fires twice

Question

I have the following code and my problem is that the transitionend event is fired twice. I don\'t know what\'s causing this. I suspected the vendor prefixes cau

Answer 1

For anyone still looking for a more robust solution, like "allTransitionEnd" event, I've implemented a jQuery "special event", more as a proof of concept for something I was working on, but I might put out a lib on Github.

Check out the JSBin.

It's quite tricky, so I won't explain too much, but it makes it real easy to do stuff after ALL transitions have ended on an element:

$(function () {

    $element.on('allTransitionEnd', function () {
        // do something after all transitions end.
    });

});

It works by probing the element for transition properties, then binds to the native transitionend events (vendor specific included) in order to keep track of properties that have finished transitioning. When all have finished transitioning it triggers any bound allTransitionsEnd handlers and then clears transition properties, in case they've changed as well, and probes for them fresh next time around.

This is really useful when multiple properties are being transitioned with varying delay and/or duration and you want to do something after all transitions have completed.

Example use cases:

• Remove a flash message after fade-out and shrink.
• Triggering "opened" and "closed" events in a reusable component, such as a menu or modal, where consumers may want to execute some logic after the transition has ended, without prying into css transitions.

If you are only transitioning one property, or have no varied delays and/or durations, then a simple solution works fine.

Works in latest version of Chrome, Firefox, Safari, Mobile Safari and IE11 and IE10. Doesn't work in IE8 because transitions are not supported. Bind to an additional native event as fallback.