之前的文章中已经测试了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属性让元素运动起来