我想在CSS过渡动画完成后删除对象,但是我不能使用JavaScript库。
我该如何检测动画何时完成?我应该使用回调函数还是自定义事件?
我想在CSS过渡动画完成后删除对象,但是我不能使用JavaScript库。
我该如何检测动画何时完成?我应该使用回调函数还是自定义事件?
element.addEventListener('transitionend', function(event) {
alert("CSS Property completed: " + event.propertyName);
}, false );
目前,确切的事件名称还没有标准化。以下是来自MDN的一句引用:
当转换完成时,将触发单个事件。在所有符合标准的浏览器中,该事件为
transitionend
,在WebKit中为webkitTransitionEnd
。
这是 Webkit 的示例: http://jsfiddle.net/bNgWY/
我正在做同样的事情,所以我会分享一个有用的、跨浏览器实现的Marakana教程。
// First, we store the names of the event according to the browsers
var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd'];
//For each of them...
for (var i in navigatorsProperties) {
//We attach it to our overlay div
el.addEventListener(navigatorsProperties[i],function()
{
// Here's the code we want to fire at transition End
console.log('transition end');
},false);
}
请注意,IE10支持使用transitionend
进行转换(参见MSDN)。
IE9及以下版本不支持转换(参见caniuse.com),因此您将无法将任何eventListener附加到转换结束(因此对于这些浏览器不要尝试msTransitionEnd
或其他内容)。
编辑:阅读Github上的Modernizr文档时,我偶然发现了他们的跨浏览器polyfills页面。在许多其他有用的链接中,我找到了这个小而非常好的transitionend脚本。
请注意,Github README.md中的示例使用jQuery,但该库确实不需要任何库和没有依赖项,因为它是使用vanilla javascript编写的。
我没有找到一个符合我的要求的适合的“transitionend” polyfill。所以如果你想要钩住一次过渡结束事件,可以使用以下代码:
(function() {
var i,
el = document.createElement('div'),
transitions = {
'transition':'transitionend',
'OTransition':'otransitionend', // oTransitionEnd in very old Opera
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
var transitionEnd = '';
for (i in transitions) {
if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
transitionEnd = transitions[i];
break;
}
}
Object.prototype.onTransitionEndOnce = function(callback) {
if (transitionEnd === '') {
callback();
return this;
}
var transitionEndWrap = function(e) {
callback();
e.target.removeEventListener(e.type, transitionEndWrap);
};
this.addEventListener(transitionEnd, transitionEndWrap);
return this;
};
}());