对于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. OSCache-JSP页面缓存(1)

    一.OSCache提供的缓存标签 这是OSCache提供的标签库中最重要的一个标签,包括在标签中的内容将应用缓存机制进行处理,处理的方式将取决于编程者对cache标签属性的设置. 第一次请求到达时,标 ...

  2. 【bzoj2190】[SDOI2008]仪仗队

    2190: [SDOI2008]仪仗队 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 2638  Solved: 1674[Submit][Statu ...

  3. zend studio在线安装svn的插件

    这个,其实真的很简单 ,但是让我纠结了很久. 安装步骤: 1.确保电脑能够上网: 2.打开zend studio,然后选择help->welcome会弹出一个欢迎页面; 3.等待几秒后可以看到右 ...

  4. 基于 EntityFramework 的数据库主从读写分离架构(1) - 原理概述和基本功能实现

        回到目录,完整代码请查看(https://github.com/cjw0511/NDF.Infrastructure)中的目录:      src\ NDF.Data.EntityFramew ...

  5. How to install Freemind 1.0.1 to Ubuntu 14

    安装了Freemind0.9后发现不能打开windows的1.0.1保存的*.mm文件,便对版本开始升级. 1. 从http://freemind.sourceforge.net/wiki/index ...

  6. Java生产者消费者问题

    1. package interview.thread; import java.util.LinkedList; import java.util.Queue; import org.apache. ...

  7. tensorflow rank

    可把tensorflow 中的tensor 理解为一个n维数组或列表, tensor 为静态变量,拥有动态维度.在tf中, 只有tensor能在节点和图计算中传递.

  8. Yii2中ACF和RBAC

    ACF ( Access Control Filter) ACF ( Access Control Filter)官网的解释就是一个可以在模型或控制器执行行为过滤器,当有用户请求时,ACF将检查acc ...

  9. easyui-tabs 页签绑定click事件,动态加载jqgrid

    .前台代码 <%-- builed by manage.aspx.cmt [ver:] at // :: --%> <%@ Page Language="C#" ...

  10. .Net插入大批量数据

    1. 使用SqlDataAdapter /// <summary>        /// 实现数据库事务,大批量新增数据        /// </summary>       ...