对于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. Tornado抽象方法抽象类

    #!/usr/bin/env python #抽象方法抽象类 import abc class Foo(metaclass=abc.ABCMeta): def f1(self): raise Exce ...

  2. JQuery实现瀑布流页面

    views.py from django.shortcuts import render,HttpResponse from app01 import models import json # Cre ...

  3. 最新Eclipse Photon安装tomcat

    发现最新版的eclipse竟然没有tomcat配置项,可能是因为spring boot很火,所以server默认就不包含tomcat,需要手动安装组件,  Version: Photon Releas ...

  4. 2-python代码坑点

    #切片: # L = ['aaa', 'bbb', 'ccc', 'ddd'] # print(L[1 : 3]) #取[1, 3):下标 # L = list(range(100)) # print ...

  5. Installing R under Unix-alikes

    Linux上R的安装 可参考https://cran.r-project.org/doc/manuals/r-release/R-admin.html#Installing-R-under-Unix_ ...

  6. php连接redis

    $redis = new Redis(); $redis->connect();

  7. POJ2253 Frogger(spfa变形)

    Description Freddy Frog is sitting on a stone in the middle of a lake. Suddenly he notices Fiona Fro ...

  8. 团队项目第六周-Alpha阶段项目复审(深海划水队)

    经小组讨论后得出以下排名: 队名 优点 缺点 排名 大猪蹄子队 界面优美,功能简洁易懂,单词解释较为完善 互动方式.操作简易性有待优化,有部分功能尚未完成 1 Running Duck队 基本功能已经 ...

  9. Android Butterknife框架 注解攻略

    一.原理. 最近发现一个很好用的开源框架,蛮不错的,可以简化你的代码,是关于注解的.不多说直接进入使用步骤讲解. 二.步骤. 1.准备阶段,先到官网( http://jakewharton.githu ...

  10. ICallbackEventHandler使用

    后端:页面需继承ICallbackEventHandler protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack ...