对于animationend事件来说的话,如果我们在外层添加这个事件监听,如果监听元素里面还有动画,则里面元素动画结束也会执行这个animationend事件。所以我们可以这样做:

if(e.target === this) {
console.log('end');
}

或者

if(e.target === e.currentTarget) {
console.log('end');
}

对于transitionend事件多次执行,一般情况下是因为监听元素有多个属性同时变化,所以执行多次transitionend事件,而且如果里面有子元素还会监听子元素的end事件,所以我们针对transitionEnd事件需要这样做:

var transitionFlag = true;
wrap.addEventListener('webkitTransitionEnd',function(e){
if(e.target === e.currentTarget && transitionFlag) {
transitionFlag = false;
console.log('end');
}
},false);

或者

var transitionFlag = true;
wrap.addEventListener('webkitTransitionEnd',function(e){
if(e.target === this && transitionFlag) {
transitionFlag = false;
console.log('end');
}
},false);

这个可以说是最终解决方案了。

注:transitionend的事件只有三种形式,之所以不检测MozTransitionEnd,msTransitionEnd 这两个的事件,因为火狐和IE都已经支持了transitionend,相反的对于加前缀反而不执行事件,oTransitionEnd  代表的是欧朋浏览器,transitionend 一定要小写 否则浏览器不识别,webkitTransitionEnd中T和E是一定要大写的,w大小写是无所谓的!

animationend的事件只有两种形式:animationend和WebkitAnimationEnd(注意事件名称的大小写)

参考:http://wnworld.com/archives/191.html

针对animationend和transitionend多次执行的问题解决方案的更多相关文章

  1. 混合模式程序集是针对“v1.1.4322”版的执行时生成的,在没有配置其它信息的情况下,无法在 4.0 执行时中载入该程序集。

    看到一个kinect大牛编写的一个水果忍者的体感游戏版本号,让我为自己一直以来仅仅用现有的网页游戏来模拟kinect体感游戏控制感到羞愧,没办法.我还是菜鸟.学习一段后自己模仿星际大战这个游戏.自己写 ...

  2. ubuntu系统普通用户sudo命令执行报错解决方案

    通过adduser user1命令创建普通用户,且使该用户具有sudo权限(将该新用户user1添加到sudo或root用户组中,或者修改/etc/sudoer文件),但是依然无法执行sudo指令,会 ...

  3. Linux下Crontab定时任务的使用教程 以及 无法执行定时任务的解决方案

     前言 本文学习思路:Linux的corntab定时任务的使用教程  --> 定时任务无效的解决方案  Linux的corntab定时任务的使用教程 1. 首先,输入命令 打开crontab定时 ...

  4. 针对Chrome谷歌等浏览器不再支持showModalDialog的解决方案

    最近在维护一个老项目,之前都是用IE来调试代码的.今天想着测试一下项目的兼容性,就用了谷歌浏览器,然后就遇到这样一个问题:一段用showModalDialog实现弹出模态框和返回值的js代码,在调试时 ...

  5. 关于linux crontab定时操作oracle不执行的问题解决方案

    问题描述:启动定时任务对oracle表进行操作,但是手动执行脚本无问题,定时任务执行无结果不反馈消息 解决方案:以centos7为例吗,首先确定脚本可手动执行,然后检查/var/log/cron下的日 ...

  6. javascript form提交 不执行onsubmit事件解决方案

    转载自:https://www.cnblogs.com/lorgine/archive/2011/03/30/2000284.html 今天做项目过程中,需要用到javascript提交form到后台 ...

  7. 【C#】【MySQL】C# 查询数据库语句@Row:=@Row+1以及执行存储过程失败解决方案

    如何实现数据库查询产生虚拟的一列序号的功能: ) )AS r; 该语句可以实现产生虚拟的一列数据在MySQL中运行没有问题. 但是在C#里面调用去出现了错误"Parameter '@ROW' ...

  8. 执行存储过程比即时SQL执行慢的解决方案

    发生过这样一件事, 写了一个SQL,查询数据大概5秒,但是放到存储过程里面去了过后,查了5分钟也没给出结果,后来网上找解决方案,终于找到一个解决方案. 在存储过程的参数那里对参数进行一个传递.反正他们 ...

  9. Qt5 发布的exe应用程序Windows下无法执行的问题解决方案

    本解决方案着重解决报错为: This application has requested the Runtime to terminate it in an unusual way. 的错误. 即: ...

随机推荐

  1. 新浪微博logo已经去掉了“新浪”二字

    如果有一天我能做出一个产品,它的命名就以我所在的行业命名该多好啊,可惜那只是一个梦.但这样的梦新浪微博却实现了,今天我登陆新浪微博的时候发 现logo已经去掉了“新浪”二字,我开始还以为我自己的电脑网 ...

  2. Theos初步

    [Theos初步] 1.安装Theos.Theos需要在mac和ios上均安装,ios上安装的是Theos服务器,以使得mac的thoes可以直接安装app到ios设备上.如果不需要使用此功能,则仅安 ...

  3. JAVA 微信开发

    公司最近要搭建一个java的微信系统,感觉自己没有记录的很多所以从今天开始每天开始更新一遍java的微信文章记录. 如有兴趣的可以加入群463676190,一起交流交流

  4. 03.WSDL分析

    自己做一个程序放到tomcat里面这个就是服务,自己安装一个oracle,oracle启动之后那它本身就是一种服务. WebService就是HTTP,那么它和HTTP有什么不同呢? HTTP GET ...

  5. 【总结整理】面试pm常见的问题---摘自《人人都是产品经理》

    求职路上,“怼”来“怼”去的面试问题 人人都是产品经理社区 发布于 2018-10-29 19:53:06 举报 阅读数:1418 ​​在求职路上,面对那些被“怼”到过的面试问题,应该如何处理? 一个 ...

  6. ubuntu 12.04 ubuntu System program problem detected 解决方法

    1. ubuntu System program problem detected本人操作系统是ubuntu12.04,不知道是系统出了问题还是装的软件有问题,每次开机都出现:System progr ...

  7. 类型或命名空间名称“Interop”在类或命名空间“Microsoft.Office”中不存在(是否缺少程序集引用?)

    准备用C#编写Web程序,生成Excel报表,在使用下面语句时报错. using Microsoft.Office.Interop.Excel; 报错信息:类型或命名空间名称“Interop”在类或命 ...

  8. 在Ubuntu安装Tomcat7.0及开机自动运行

    在Ubuntu安装Tomcat7.0及开机自动运行 1.安装装Tomcat7.0 一般都是绿色版的,下载一个tomcat7.0解开到指定的目录上即可 然后进入tomcat目录的bin文件夹,执行 su ...

  9. grid search

    sklearn.metrics.make_scorer(score_func, greater_is_better=True, needs_proba=False, needs_threshold=F ...

  10. Asp.net WebPages框架运行原理浅析

    [来源] 达内    [编辑] 达内   [时间]2012-09-14 在Asp.net4和4.5中,新增了WebPages Framework,编写页面代码使用了新的Razor语法,代码更加的简洁和 ...