我在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似乎都不支持transitioned。当我在下面这样的场景中使用ie9时(在动画完成后从DOM中删除加载屏幕),我该如何设置ie9的回退?
$('#loading').one(transitionEvent, function(event) {
$('#loading').remove();
});
我已经看到了几个关于如何使用与本文顶部类似的函数来防止多个回调的答案,但我只是不知道如何创建回退。谢谢你的帮助!
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);
}
如果不支持该事件,函数将返回一个错误值(未定义)。