Question

我正在使用以下代码和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的后备（在动画完成后从DOM中删除加载屏幕）？

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

我已经看到了几个关于如何使用类似于本文顶部的回调来避免多次回调的答案，但我只是不了解如何创建回退。谢谢你的帮助！

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

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

ie9的转换结束后退

1 个答案: