JavaScript探测CSS动画是否已经完成的方法

不啰嗦上代码：

WN:(function(){
      var el = $(''),
 transition="transition",
 transitionEnd,
 animEvent={'start':null,'iteration':null,'end':null},
 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 el.css(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 el.css(name) === "string"){
     return transEndEventNames[name];
   }
 }
      })();
      
      animEvent.end=(function(){
 var animEndEventNames = {
   WebkitAnimation : 'webkitAnimationEnd',
   animation   : 'animationend'
 }
 for(var name in animEndEventNames){
   if(typeof el.css(name) === "string"){
     return animEndEventNames[name];
   }
 }
      })();
      
      animEvent.iteration=(function(){
 var animIterationEventNames = {
   WebkitAnimation : 'webkitAnimationIteration',
   animation   : 'animationiteration'
 }
 for(var name in animIterationEventNames){
   if(typeof el.css(name) === "string"){
     return animIterationEventNames[name];
   }
 }
      })();
      
      animEvent.start=(function(){
 var animStartEventNames = {
   WebkitAnimation : 'webkitAnimationStart',
   animation   : 'animationstart'
 }
 for(var name in animStartEventNames){
   if(typeof el.css(name) === "string"){
     return animStartEventNames[name];
   }
 }
      })();
      
      return {
 called:false,
 addTranEvent:function(elem,fn,duration){
   var self = this;
   var fncallback = function(){
     if(!self.called){
fn();
self.called = true;
     }
   };
   function hand(){  
     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) === "[object Object]"){
     for(var name in val){
if(/^transition|animation|transform/.test(name)){
  var styleName=name.charAt(0).toUpperCase() + name.substr(1);
  elem.css(vendorPrefix+styleName,val[name]);
}else{
  elem.css(name,val[name]);
}
     }
   }
 }
      };
    })(),

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。