代码：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!');

});

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

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