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


Posted in Javascript onAugust 30, 2016

不??律洗?耄?/p>

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

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

Javascript 相关文章推荐
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 #Javascript
很棒的js Tab选项卡切换效果
Aug 30 #Javascript
js改变透明度实现轮播图的算法
Aug 24 #Javascript
标准的js无缝滚动效果
Aug 30 #Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 #Javascript
js制作网站首页图片轮播特效代码
Aug 30 #Javascript
js实现简单的碰壁反弹效果
Aug 30 #Javascript
You might like
提问的智慧
2006/10/09 PHP
一个oracle+PHP的查询的例子
2006/10/09 PHP
php预定义常量
2006/12/25 PHP
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
js replace替换所有匹配的字符串
2014/02/13 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
py中的目录与文件判别代码
2008/07/16 Python
python 生成目录树及显示文件大小的代码
2009/07/23 Python
python常用函数详解
2016/09/13 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
若干个Java基础面试题
2015/05/19 面试题
计算机专业学生求职信分享
2013/12/15 职场文书
学术会议欢迎词
2014/01/09 职场文书
信息工作经验交流材料
2014/05/28 职场文书
计划生育目标责任书
2015/05/09 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技