css3 动画事件兼容写法

css 动画事件
原文链接：http://caibaojian.com/animationend.html
No prefix - animationstart, animationiteration, animationend
Webkit - webkitAnimationStart, webkitAnimationIteration, webkitAnimationEnd
Mozilla - mozAnimationStart, mozAnimationIteration, mozAnimationEnd
MS - MSAnimationStart, MSAnimationIteration, MSAnimationEnd
O – oAnimationStart, oAnimationIteration, oAnimationEnd

示例：
// set the var here
var monkey = document.querySelector("#monkey");

// listen for animation start
monkey.addEventListener(“animationstart”,function(e){
console.log(“log at beginning of monkey animation”);
},false);

// listen for animation iteration
monkey.addEventListener(“animationiteration”,function(e){
console.log(“log at beginning of each subsequent iteration”);
},false);

// listen for animation end
monkey.addEventListener(“animationend”,function(e){
console.log(“log at end of monkey animation”);
},false);

兼容写法：
// prefixer helper function
var pfx = [“webkit”, “moz”, “MS”, “o”, “”];
function prefixedEventListener(element, type, callback) {
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
element.addEventListener(pfx[p]+type, callback, false);
}
}

// new event listener function
var monkey = document.querySelector("#monkey");
prefixedEventListener(monkey,“AnimationStart”,function(e){
console.log(“log at beginning of monkey animation”);
});