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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
react-router中的属性详解
Jun 01 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
基于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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
PyQt5实现拖放功能
2018/04/25 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
实习单位鉴定意见
2015/06/04 职场文书
刑事法律意见书
2015/06/04 职场文书
师范生见习总结范文
2015/06/23 职场文书
javascript的var与let,const之间的区别详解
2022/02/18 Javascript