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的匿名函数使用介绍
Dec 11 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
vuex的使用及持久化state的方式详解
Jan 23 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
Python对列表中的各项进行关联详解
2017/08/15 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
pandas.cut具体使用总结
2019/06/24 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
Python pandas用法最全整理
2019/08/04 Python
python实现大学人员管理系统
2019/10/25 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
薇姿法国官网:Vichy法国
2021/01/28 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
如何在存储过程中使用Loop
2016/01/05 面试题
水果超市创业计划书
2014/01/27 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
投资意向协议书
2015/01/29 职场文书
初中政教处工作总结
2015/08/12 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
Golang中channel的原理解读(推荐)
2021/10/16 Golang