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

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

相关文章

  • 微信小程序裁剪头像插件使用方法详解

    微信小程序裁剪头像插件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序裁剪头像插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 探讨javascript是不是面向对象的语言

    探讨javascript是不是面向对象的语言

    这篇文章主要是介绍了javascript是不是面向对象的语言。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JavaScript中闭包的4个有用技巧分享

    JavaScript中闭包的4个有用技巧分享

    当谈到JavaScript编程中的高级概念和技巧时,闭包(Closures)是一个重要而有趣的主题,闭包是一种函数与其创建时的词法环境的组合,它允许我们捕获和保留局部变量,并在函数之外使用它们,在这篇文章中,我们将深入探讨JavaScript中闭包的4种有用技巧
    2023-10-10
  • 使用JavaScript和MQTT开发物联网应用示例解析

    使用JavaScript和MQTT开发物联网应用示例解析

    这篇文章主要介绍了使用JavaScript和MQTT开发物联网应用示例解析,文章通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • ECharts坐标轴刻度数值处理方法例子

    ECharts坐标轴刻度数值处理方法例子

    这篇文章主要给大家介绍了关于ECharts坐标轴刻度数值处理的相关资料,文章介绍了一个用于图表Y轴数值简写的函数,它可以将大数值转换为K、M、B等简写形式,从而使图表更加美观和易读,需要的朋友可以参考下
    2024-11-11
  • Javascript 判断函数类型完美解决方案

    Javascript 判断函数类型完美解决方案

    在判断函数类型时,我们通常使用typeof方法,一般情况下,它会得到我们所预想的效果。
    2009-09-09
  • 提高Web性能的前端优化技巧总结

    提高Web性能的前端优化技巧总结

    这篇文章讲述可以帮助 改善优化前端的技术,非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN,以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升。下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript位置参数实现原理及过程解析

    JavaScript位置参数实现原理及过程解析

    这篇文章主要介绍了JavaScript位置参数实现原理及过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • JavaScript调用传递变量参数的相关问题及解决办法

    JavaScript调用传递变量参数的相关问题及解决办法

    本文给大家介绍javascript调用传递变量参数的相关问题及解决办法,涉及到js调用传递参数相关知识,对js调用传递参数感兴趣的朋友一起学习吧
    2015-11-11
  • ff chrome和ie下全局动态定位的异同及全局高度的取法

    ff chrome和ie下全局动态定位的异同及全局高度的取法

    这篇文章主要介绍了ff chrome和ie下全局动态定位的异同及全局高度的取法,需要的朋友可以参考下
    2014-06-06

最新评论