JavaScript探測CSS動畫是否已經完成的方法_javascript技巧

不囉嗦上代碼：

WN:(function(){      var el = $('<fakeelement>'),        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]);              }            }          }        }      };    })(),

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。