代码:JavaScript 监听 css3动画

浏览器的CSS前缀。transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件。

JavaScript

/* 探测浏览器种类 */

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

}

}

}

/* 监听变换事件! */

var transitionEvent = whichTransitionEvent();

transitionEvent && e.addEventListener(transitionEvent, function() {

console.log('Transition complete! This is the callback, no library needed!');

});

不需要大型的库的支持,动画一旦结束,回调函数就会触发。

切图网,不一样的实战前端开发训练。我们专注做前端,我们选择最简单的方式,让页面更轻巧。


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容