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 相关文章推荐
javascript 尚未实现错误解决办法
Nov 27 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
详解JavaScript中return的用法
May 08 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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
让PHP支持断点续传的源码
2010/05/16 PHP
关于尾递归的使用详解
2013/05/02 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
php程序内部post数据的方法
2015/03/31 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
php生成word并下载代码实例
2019/03/15 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
Python实现简单的语音识别系统
2017/12/13 Python
Django实现组合搜索的方法示例
2018/01/23 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
python实现udp传输图片功能
2020/03/20 Python
Python: glob匹配文件的操作
2020/12/11 Python
python实现简单的学生管理系统
2021/02/22 Python
中学生在校期间的自我评价分享
2013/11/13 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
公司保洁员管理制度
2015/08/04 职场文书
Apache自带的ab压力测试工具的实现
2022/07/23 Servers