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

前端之家收集整理的这篇文章主要介绍了JavaScript探测CSS动画是否已经完成的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

不啰嗦上代码

'),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,fn){
      elem.unbind(animEvent[name],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]);
          }
        }
      }
    }
  };
})(),</pre>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/46220.html

猜你在找的JavaScript相关文章