之前的文章中已经测试了transform、transitionend、animationend在移动和pc端浏览器的前缀的兼容问题(强烈建议先阅读transform 兼容 和 transitionend（多次执行） animationend 事件兼容问题(针对pc和移动浏览器的前缀问题),如果知道了兼容问题，下面的代码就可以很好理解，现在整理了一下，写成一个简单的原声 js函数，这个函数方法有：
1、addTranEvent(elem,fn,duration)：用于绑定transtionend事件，处理掉多次执行的问题
2、addAnimEvent(elem,fn),removeAnimEvent(elem,fn)：分别用于绑定和解绑animationend事件
3、setStyleAttribute(elem,val)：用于设置css3的属性
通过将之前的文章的代码整理一下，代码不多也很好理解，具体如下：
(function (root, factory) {
if (typeof define === 'function') {
define(factory);
}else if (typeof exports === 'object') {
module.exports = factory;
} else {
root.WN = factory();
}
})(this,function(){
var WN = {},
body=document.body || document.documentElement,
style=body.style,
transition="transition",
transitionEnd,
animationEnd,
vendorPrefix;
transition=transition.charAt(0).toUpperCase() + transition.substr(1);
vendorPrefix=(function(){//现在的opera也是webkit
var i=0, vendor=["Moz", "Webkit", "Khtml", "O", "ms"];
while (i < vendor.length) {
if (typeof style[vendor[i] + transition] === "string") {
return vendor[i];
}
i++;
}
return false;
})();
transitionEnd=(function(){
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
OTransition : 'oTransitionEnd otransitionend',
transition : 'transitionend'
}
for(var name in transEndEventNames){
if(typeof style[name] === "string"){
return transEndEventNames[name]
}
}
})();
animationEnd=(function(){
var animEndEventNames = {
WebkitAnimation : 'webkitAnimationEnd',
animation : 'animationend'
}
for(var name in animEndEventNames){
if(typeof style[name] === "string"){
return animEndEventNames[name]
}
}
})();
WN.addTranEvent=function(elem,fn,duration){
var called=false;
var fncallback = function(){
if(!called){
fn();
called=true;
}
};
function hand(){
elem.addEventListener(transitionEnd, function () {
elem.removeEventListener(transitionEnd, arguments.callee, false);
fncallback();
}, false);
}
setTimeout(hand,duration);
};
WN.addAnimEvent=function(elem,fn){
elem.addEventListener(animationEnd,fn,false)
};
WN.removeAnimEvent=function(elem,fn){
elem.removeEventListener(animationEnd,fn,false)
};
WN.setStyleAttribute=function(elem,val){
if(Object.prototype.toString.call(val)==="[object Object]"){
for(var name in val){
if(/^transition|animation|transform/.test(name)){
var styleName=name.charAt(0).toUpperCase() + name.substr(1);
elem.style[vendorPrefix+styleName]=val[name];
}else{
elem.style[name]=val[name];
}
}
}
};
WN.transitionEnd=transitionEnd;
WN.vendorPrefix=vendorPrefix;
WN.animationEnd=animationEnd;
return WN;
});
代码就是上面那些，就是根据浏览器的前缀来获取属性，然后去设置我们想要的结果，下面用三个demo分别来演示一下：
1、transitionend事件
2、animationend事件
3、设置transfrom,transitionDuration的css3属性让元素运动起来