写一个焦点图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事件的更多相关文章

  1. HTML 事件(三) 事件流与事件委托

    本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...

  2. HTML 事件(四) 模拟事件操作

    本篇主要介绍HTML DOM中事件的模拟操作. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4.  ...

  3. javascript中的事件冒泡和事件捕获

    1.事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).以下面的HTML ...

  4. 手持设备点击响应速度,鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

  5. iOS 事件传递(Touch事件)

    先总说如下: 1.当手指触摸到屏幕时,会产生UITouch对象和UIEvent对象. 2.这两个对象产生后会被传递到UIApplication管理的一个事件队列中. 3.再有UIApplication ...

  6. JavaScript事件对象与事件处理程序

    在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...

  7. 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记

    1.事件流 浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上 ...

  8. JS学习笔记9之event事件及其他事件

    -->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...

  9. DOM事件揭秘-事件流

    事件:文档/窗口中发生的特定的交互瞬间 瀑布流,图片轮播 动作都是通过事件触发的 课程内容: 1,理解事件流 2,使用时间处理程序 3,不同的事件类型 ie4.0以后, 事件流:描述的是从页面中接收事 ...

随机推荐

  1. Oracle 控制文件管理

    控制文件是一个很小的二进制文件(10MB左右),含有数据库结构信息,包括数据文件和日志文件信息.控制文件在数据库创建时被自动创建,并在数据库发生物理变数时更新.控制文件被不断更新,在任何时候都要保证控 ...

  2. [百家号]雷电3和USB Type-C究竟有什么区别?

    雷电3和USB Type-C究竟有什么区别? https://baijiahao.baidu.com/s?id=1617271490773519582&wfr=spider&for=p ...

  3. vCenter简单查看多少虚拟机在开机状态和一共多少虚拟机

    vCenter 界面上面不好找 具体的开机 运行数目 但是数据库里面比较好差 登录vCenter的数据库. 查看表主要是 查看正在开机的虚拟机 select * from dbo.VPX_VM WHE ...

  4. tenda u1 usb wireless device install driver for kali linux kernal Debian 4.3.3-7kali2 (2016-01-27) x86_64 GNU/Linux

    因为内核比较新的关系,tenda官方网站上面提供给u1无线网卡的驱动并不能正常编译使用,编译的时候报一个类似错误 /usr/src/linux-headers--kali1-common/Makefi ...

  5. caffe运行错误: im2col.cu:61] Check failed: error == cudaSuccess (8 vs. 0) invalid device function

    错误: im2col.cu:61] Check failed: error == cudaSuccess (8 vs. 0)  invalid device function 原因:由于Makefil ...

  6. Linux下创建和删除软、硬链接 可临时处理空间不足

    在Linux系统中,内核为每一个新创建的文件分配一个Inode(索引结点),每个文件都有一个惟一的inode号.文件属性保存在索引结点里,在访问文件时,索引结点被复制到内存在,从而实现文件的快速访问. ...

  7. Cuba获取属性文件中的配置

    最直接的办法是,使用AppContext.getProperty("cuba.trustedClientPassword"); 可以获取到系统中的web模块下的wep-app.pr ...

  8. day28 staticmethod 装饰器

    静态方法装饰器 完全面向对象的程序中,如果存在某个函数既和对象无关也和类无关,就用staticmethod方法, 在调用此方法的时候只需要加上类名即可,说白了就是强行面向对象....把不是对象的方法也 ...

  9. day11 作用域

    返回值可以任何类型,返回可以是函数,返回函数还可以再被调用仅仅返回函数是无法运行的.要运行需要加上()没有返回值的时候,默认返回值为空,None def test1(): print("in ...

  10. JavaScript 隐式类型转换

    JavaScript 隐式类型转换 原文:https://blog.csdn.net/itcast_cn/article/details/82887895 · 1.1 隐式转换介绍 · 1.2 隐式转 ...