JavaScript探测CSS动画是否已经完成的方法
不啰嗦上代码:
WN:(function(){ varel=$('<fakeelement>'), transition="transition", transitionEnd, animEvent={'start':null,'iteration':null,'end':null}, vendorPrefix; transition=transition.charAt(0).toUpperCase()+transition.substr(1); vendorPrefix=(function(){//现在的opera也是webkit vari=0,vendor=["Moz","Webkit","Khtml","O","ms"]; while(i<vendor.length){ if(typeofel.css(vendor[i]+transition)==="string"){ returnvendor[i]; } i++; } returnfalse; })(); transitionEnd=(function(){ vartransEndEventNames={ WebkitTransition:'webkitTransitionEnd', MozTransition:'transitionend', OTransition:'oTransitionEndotransitionend', transition:'transitionend' } for(varnameintransEndEventNames){ if(typeofel.css(name)==="string"){ returntransEndEventNames[name]; } } })(); animEvent.end=(function(){ varanimEndEventNames={ WebkitAnimation:'webkitAnimationEnd', animation:'animationend' } for(varnameinanimEndEventNames){ if(typeofel.css(name)==="string"){ returnanimEndEventNames[name]; } } })(); animEvent.iteration=(function(){ varanimIterationEventNames={ WebkitAnimation:'webkitAnimationIteration', animation:'animationiteration' } for(varnameinanimIterationEventNames){ if(typeofel.css(name)==="string"){ returnanimIterationEventNames[name]; } } })(); animEvent.start=(function(){ varanimStartEventNames={ WebkitAnimation:'webkitAnimationStart', animation:'animationstart' } for(varnameinanimStartEventNames){ if(typeofel.css(name)==="string"){ returnanimStartEventNames[name]; } } })(); return{ called:false, addTranEvent:function(elem,fn,duration){ varself=this; varfncallback=function(){ if(!self.called){ fn(); self.called=true; } }; functionhand(){ elem.on(transitionEnd,function(){ //elem.unbind(transitionEnd,arguments.callee); fncallback(); }); } setTimeout(hand,duration); }, addAnimEvent:function(elem,name,fn){ elem.on(animEvent[name],fn); }, removeAnimEvent:function(elem,name,fn){ elem.unbind(animEvent[name],fn); }, setStyleAttribute:function(elem,val){ if(Object.prototype.toString.call(val)==="[objectObject]"){ for(varnameinval){ if(/^transition|animation|transform/.test(name)){ varstyleName=name.charAt(0).toUpperCase()+name.substr(1); elem.css(vendorPrefix+styleName,val[name]); }else{ elem.css(name,val[name]); } } } } }; })(),
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。