ie9 的过渡结束回退

chr*_*her 5 css jquery internet-explorer css-transitions transitionend

我将以下代码与 jquery 一起使用以在 transitionend 上触发事件并避免多个回调/支持多个浏览器:

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];
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

(代码在这里找到:http : //davidwalsh.name/css-animation-callback

但是,无论前缀/语法如何,ie9 似乎都不支持 transitionend。当我在如下场景中使用 ie9 时,如何为 ie9 设置后备(在动画完成后从 DOM 中删除加载屏幕)?

$('#loading').one(transitionEvent, function(event) {
      $('#loading').remove();
});
Run Code Online (Sandbox Code Playgroud)

我已经看到了几个关于如何使用与本文顶部的函数类似的函数来防止多次回调的答案,但我只是不明白如何创建回退。谢谢你的帮助!

小智 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);
}
Run Code Online (Sandbox Code Playgroud)

如果事件不受支持,该函数将返回一个假值(未定义)。