ie9 的过渡结束后备

Posted 2023-03-06

【中文标题】ie9 的过渡结束后备

【英文标题】：Transition End Fallback for ie9

【发布时间】：2015-09-19 06:04:39

【问题描述】：

我将以下代码与 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];
        
    

（在此处找到代码：http://davidwalsh.name/css-animation-callback）

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

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

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

【参考方案1】：

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);

如果事件不受支持，该函数将返回一个假值（未定义）。

【讨论】：

但是如果执行了回退（transitionEvent 是undefined），那么你正在触发undefined 事件！

您应该检查顶部的 transitionEvent 值，然后覆盖该值并执行其余操作