针对animationend和transitionend多次执行的问题解决方案
对于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多次执行的问题解决方案的更多相关文章
- 混合模式程序集是针对“v1.1.4322”版的执行时生成的,在没有配置其它信息的情况下,无法在 4.0 执行时中载入该程序集。
看到一个kinect大牛编写的一个水果忍者的体感游戏版本号,让我为自己一直以来仅仅用现有的网页游戏来模拟kinect体感游戏控制感到羞愧,没办法.我还是菜鸟.学习一段后自己模仿星际大战这个游戏.自己写 ...
- ubuntu系统普通用户sudo命令执行报错解决方案
通过adduser user1命令创建普通用户,且使该用户具有sudo权限(将该新用户user1添加到sudo或root用户组中,或者修改/etc/sudoer文件),但是依然无法执行sudo指令,会 ...
- Linux下Crontab定时任务的使用教程 以及 无法执行定时任务的解决方案
前言 本文学习思路:Linux的corntab定时任务的使用教程 --> 定时任务无效的解决方案 Linux的corntab定时任务的使用教程 1. 首先,输入命令 打开crontab定时 ...
- 针对Chrome谷歌等浏览器不再支持showModalDialog的解决方案
最近在维护一个老项目,之前都是用IE来调试代码的.今天想着测试一下项目的兼容性,就用了谷歌浏览器,然后就遇到这样一个问题:一段用showModalDialog实现弹出模态框和返回值的js代码,在调试时 ...
- 关于linux crontab定时操作oracle不执行的问题解决方案
问题描述:启动定时任务对oracle表进行操作,但是手动执行脚本无问题,定时任务执行无结果不反馈消息 解决方案:以centos7为例吗,首先确定脚本可手动执行,然后检查/var/log/cron下的日 ...
- javascript form提交 不执行onsubmit事件解决方案
转载自:https://www.cnblogs.com/lorgine/archive/2011/03/30/2000284.html 今天做项目过程中,需要用到javascript提交form到后台 ...
- 【C#】【MySQL】C# 查询数据库语句@Row:=@Row+1以及执行存储过程失败解决方案
如何实现数据库查询产生虚拟的一列序号的功能: ) )AS r; 该语句可以实现产生虚拟的一列数据在MySQL中运行没有问题. 但是在C#里面调用去出现了错误"Parameter '@ROW' ...
- 执行存储过程比即时SQL执行慢的解决方案
发生过这样一件事, 写了一个SQL,查询数据大概5秒,但是放到存储过程里面去了过后,查了5分钟也没给出结果,后来网上找解决方案,终于找到一个解决方案. 在存储过程的参数那里对参数进行一个传递.反正他们 ...
- Qt5 发布的exe应用程序Windows下无法执行的问题解决方案
本解决方案着重解决报错为: This application has requested the Runtime to terminate it in an unusual way. 的错误. 即: ...
随机推荐
- Tornado抽象方法抽象类
#!/usr/bin/env python #抽象方法抽象类 import abc class Foo(metaclass=abc.ABCMeta): def f1(self): raise Exce ...
- JQuery实现瀑布流页面
views.py from django.shortcuts import render,HttpResponse from app01 import models import json # Cre ...
- 最新Eclipse Photon安装tomcat
发现最新版的eclipse竟然没有tomcat配置项,可能是因为spring boot很火,所以server默认就不包含tomcat,需要手动安装组件, Version: Photon Releas ...
- 2-python代码坑点
#切片: # L = ['aaa', 'bbb', 'ccc', 'ddd'] # print(L[1 : 3]) #取[1, 3):下标 # L = list(range(100)) # print ...
- Installing R under Unix-alikes
Linux上R的安装 可参考https://cran.r-project.org/doc/manuals/r-release/R-admin.html#Installing-R-under-Unix_ ...
- php连接redis
$redis = new Redis(); $redis->connect();
- POJ2253 Frogger(spfa变形)
Description Freddy Frog is sitting on a stone in the middle of a lake. Suddenly he notices Fiona Fro ...
- 团队项目第六周-Alpha阶段项目复审(深海划水队)
经小组讨论后得出以下排名: 队名 优点 缺点 排名 大猪蹄子队 界面优美,功能简洁易懂,单词解释较为完善 互动方式.操作简易性有待优化,有部分功能尚未完成 1 Running Duck队 基本功能已经 ...
- Android Butterknife框架 注解攻略
一.原理. 最近发现一个很好用的开源框架,蛮不错的,可以简化你的代码,是关于注解的.不多说直接进入使用步骤讲解. 二.步骤. 1.准备阶段,先到官网( http://jakewharton.githu ...
- ICallbackEventHandler使用
后端:页面需继承ICallbackEventHandler protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack ...