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以后, 事件流:描述的是从页面中接收事 ...
随机推荐
- [区块链]POW 与POS
POW:全称Proof ofWork,工作证明. 这是什么意思呢?就是说,你能获得多少货币,取决于你挖矿贡献的有效工作,也就是说,你电脑性能越好,分给你的矿就会越多,这就是根据你的工作证明来执行货币的 ...
- 一个简单的Oracle和 SQLSERVER 重建所有表索引的办法
1. SQLSERVER 使用微软自带的存储过程 exec sp_msforeachtable 'DBCC DBREINDEX(''?'')' 2. Oracle的办法: select 'alter ...
- codeforces518B
Tanya and Postcard CodeForces - 518B 有个小女孩决定给他的爸爸寄明信片.她已经想好了一句话(即长度为n的字符串s),包括大写和小写英文字母.但是他不会写字,所以她决 ...
- jQuery筛选总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- MySQL将一张表的某些列数据,复制到另外一张表,并且修改某些内容
MySQL将一张表的某些列数据,复制到另外一张表 INSERT INTO t_topic_content(content,topicId) SELECT content,id FROM t_topi ...
- tensorflow_mmp
搭建win10+py3.6+cuda9.1+cudnn7+tf1.5(如果想知道为什么这么搭配,自己去装两天就知道了) tensorflow_gpu......whl下载 剩下的官网下载,cuda9. ...
- 线段树分治总结(线段树分治,线段树,并查集,树的dfn序,二分图染色)
闲话 stO猫锟学长,满脑子神仙DS 网上有不少Dalao把线段树分治也归入CDQ分治? 还是听听YCB巨佬的介绍: 狭义:只计算左边对右边的贡献. 广义:只计算外部对内部的贡献. 看来可以理解为广义 ...
- 【题解】 bzoj3894: 文理分科 (网络流/最小割)
bzoj3894,懒得复制题面,戳我戳我 Solution: 首先这是一个网络流,应该还比较好想,主要就是考虑建图了. 我们来分析下题面,因为一个人要么选文科要么选理科,相当于两条流里面割掉一条(怎么 ...
- 25 行 Python 代码实现人脸识别——OpenCV 技术教程
OpenCV OpenCV 是最流行的计算机视觉库,原本用 C 和 C++ 开发,现在也支持 Python. 它使用机器学习算法在图像中搜索人的面部.对于人脸这么复杂的东西,并没有一个简单的检测能对是 ...
- suoi37 清点更多船只 (卡空间线段树)
sbw巨佬的卡空间方法,把线段树的叶节点只记到长度为16的区间,然后在叶节点上暴力修改查询,这样点数是$\frac{N}{8}$的,可以过... orz #include<bits/stdc++ ...