webkitAnimationEnd事件与webkitTransitionEnd事件
写一个焦点图demo,css3动画完成以后要把它隐藏掉,这里会用到css3的事件,以前没有接触过,结果查了一下发现这是一片新天地啊,而且里面还有好多坑,比如重复动画多次触发什么的。anyway,我还是先抓住有用的吧!任何能为我所用的都是有用的,任何不能为我所用的都是没用的,任何我能学会掌握的都是有用的,我学不会的,再屌也没用!
//捕捉webkitAnimationEnd事件
element.addEventListener('webkitAnimationEnd', end, false); //捕捉webkitTransitionEnd事件
element.addEventListener('webkitTransitionEnd', end, false); function end(){
//code
}
没什么难以理解的,看代码就能明白。
但是这里有个参数有小坑,下面是我自己写的end方法
function transitionEnd(e){
if(e.propertyName=="-webkit-transform"){
this.parentNode.style.visibility="hidden";
}
}
就是那个event参数,我怎么都进不到那个if分支里,究其原因,我把e打印出来看一下,并没有"-webkit-transform"这样一个propertyName,只有一个叫"transform"的,所以我就改成了下面这样。
function transitionEnd(e){
if(e.propertyName=="-webkit-transform" || e.propertyName=="transform"){
this.parentNode.style.visibility="hidden";
}
}
反正坑挺多的,随时console.log()吧!
webkitAnimationEnd事件与webkitTransitionEnd事件的更多相关文章
- HTML 事件(三) 事件流与事件委托
本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...
- HTML 事件(四) 模拟事件操作
本篇主要介绍HTML DOM中事件的模拟操作. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4. ...
- javascript中的事件冒泡和事件捕获
1.事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).以下面的HTML ...
- 手持设备点击响应速度,鼠标事件与touch事件的那些事
前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
- iOS 事件传递(Touch事件)
先总说如下: 1.当手指触摸到屏幕时,会产生UITouch对象和UIEvent对象. 2.这两个对象产生后会被传递到UIApplication管理的一个事件队列中. 3.再有UIApplication ...
- JavaScript事件对象与事件处理程序
在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...
- 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记
1.事件流 浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上 ...
- JS学习笔记9之event事件及其他事件
-->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...
- DOM事件揭秘-事件流
事件:文档/窗口中发生的特定的交互瞬间 瀑布流,图片轮播 动作都是通过事件触发的 课程内容: 1,理解事件流 2,使用时间处理程序 3,不同的事件类型 ie4.0以后, 事件流:描述的是从页面中接收事 ...
随机推荐
- WordPress发送注册用户设置密码邮件提示:您的密码重设链接无效,请在下方请求新链接
1.修改WP根目录下的 wp-login.php文件将 $message .= '<' . network_site_url("wp-login.php?action=rp&k ...
- Fail2ban 配置
本例为wordpress管理员登陆限制安装rpm -Uvh http://download.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.n ...
- 不失一般性和快捷性地判定决策单调(洛谷P1912 [NOI2009]诗人小G)(动态规划,决策单调性,单调队列)
洛谷题目传送门 闲话 看完洛谷larryzhong巨佬的题解,蒟蒻一脸懵逼 如果哪年NOI(放心我这样的蒟蒻是去不了的)又来个决策单调性优化DP,那蒟蒻是不是会看都看不出来直接爆\(0\)?! 还是要 ...
- 通过 powershell 配置 IIS
1. 设置iis pool: cls Import-Module WebAdministration Get-ChildItem IIS:\apppools | ForEach-Object{ ...
- rt-thread learning notes
rt-thread learning notes 2018-01-15 > 001 具有相同优先级的线程,每个线程的时间片大小都可以在初始化或创建该线程时指定 rt_thread_t rt_th ...
- jieba分词器
始终觉得官方文档是最好的学习途径.嗯,我只是一个大自然的搬运工.传送门https://github.com/fxsjy/jieba 1.分词 jieba.cut 方法接受三个输入参数: 需要分词的字符 ...
- A1075. PAT Judge
The ranklist of PAT is generated from the status list, which shows the scores of the submittions. Th ...
- A1077. Kuchiguse
The Japanese language is notorious for its sentence ending particles. Personal preference of such pa ...
- Java中如何将字符串数组转换成字符串
如果将“字符串数组”转换成“字符串”,只能通过循环,没有其他方法: public static String getExecSqlString(String str){ StringBuffer sb ...
- JAVA Swing使用JFreeChart实现折线图绘制
效果如下: 实现步骤: 1.导入JAR包 jfreechart官网下载的zip文件中包含这两个jar包 2.代码编写 import org.jfree.chart.ChartFactory; impo ...