我在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();
});
我已经看到了一些有关如何使用与本文顶部类似的功能来防止多个回调的答案,但我只是不了解如何创建后备。谢谢你的帮助!
最佳答案
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);
}
如果不支持该事件,则该函数返回一个伪造的值(未定义)。