5

I'm using the following code with jquery to trigger events on transitionend and avoid multiple callback/support multiple browsers:

function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

(code found here: http://davidwalsh.name/css-animation-callback)

However, it seems that ie9 doesn't support transitionend regardless of the prefix/syntax. How would I set up a fallback for ie9 when i'm using it in a scenario like the following (to remove a loading screen from the DOM after animation is complete)?

$('#loading').one(transitionEvent, function(event) {
      $('#loading').remove();
});

I've seen several answers about how to prevent multiple callbacks using a similar function to the one at the top of this post, but am just not understanding how to create a fallback. Thanks for your help!

christopher
  • 137
  • 8

1 Answers1

5
var transitionEvent = whichTransitionEvent();

// bind your event
$('#loading').one(transitionEvent, function(event) {
  $('#loading').remove();
});

// if event not supported e.g. IE <= 9
if (! transitionEvent) {
  $('#loading').trigger(transitionEvent);
}

The function returns a falsy value (undefined), if the event is not supported.

NehrDani
  • 66
  • 1
  • 2
  • but if the fallback is executed (`transitionEvent` is `undefined`), then you are triggering and `undefined` event! – guari Mar 03 '18 at 12:06
  • you should check for `transitionEvent` value at the top and then override the value and do the rest – guari Mar 03 '18 at 12:15