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

 更新时间:2016年08月30日 09:08:16   作者:愚人的一天  
这篇文章主要为大家详细介绍了JavaScript探测CSS动画是否已经完成的方法,感兴趣的小伙伴们可以参考一下

不啰嗦上代码:

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]);
              }
            }
          }
        }
      };
    })(),

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

相关文章

  • layer父页获取弹出层输入框里面的值方法

    layer父页获取弹出层输入框里面的值方法

    今天小编就为大家分享一篇layer父页获取弹出层输入框里面的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 使用mock.js随机数据和使用express输出json接口的实现方法

    使用mock.js随机数据和使用express输出json接口的实现方法

    这篇文章主要介绍了使用mock.js随机数据和使用express输出json接口的实现方法,需要的朋友可以参考下
    2018-01-01
  • 详解JavaScript的数据类型以及数据类型的转换

    详解JavaScript的数据类型以及数据类型的转换

    这篇文章主要介绍了JavaScript的数据类型以及数据类型的转换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript鼠标特效大全

    JavaScript鼠标特效大全

    这篇文章主要为大家详细介绍了JavaScript鼠标特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 一篇文章详解JS的四种异步解决方案

    一篇文章详解JS的四种异步解决方案

    异步在JS中是常用的,下面这篇文章主要给大家介绍了关于JS四种异步解决方案的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用js具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-06-06
  • JavaScript实现邮箱后缀提示功能的示例代码

    JavaScript实现邮箱后缀提示功能的示例代码

    这篇文章主要介绍了JavaScript实现邮箱后缀提示功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • JS功能代码集锦

    JS功能代码集锦

    这篇文章主要介绍了JS功能代码集锦 的相关资料,需要的朋友可以参考下
    2016-05-05
  • 关于在Servelet中如何获取当前时间的操作方法

    关于在Servelet中如何获取当前时间的操作方法

    下面小编就为大家带来一篇关于在Servelet中如何获取当前时间的操作方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • bootstrap输入框组代码分享

    bootstrap输入框组代码分享

    Bootstrap 支持的另一个特性,输入框组,输入框组扩展自表单控件.下面小编给大家介绍bootstrap输入框组的代码,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • js窗口关闭提示信息(兼容IE和firefox)

    js窗口关闭提示信息(兼容IE和firefox)

    这篇文章主要介绍了当关闭窗口的时候,显示窗口提示信息,友好的进行提示,防止丢失重要信息,需要的朋友可以参考一下
    2015-10-10

最新评论