写一个焦点图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. WordPress发送注册用户设置密码邮件提示:您的密码重设链接无效,请在下方请求新链接

    1.修改WP根目录下的 wp-login.php文件将 $message .= '<' . network_site_url("wp-login.php?action=rp&k ...

  2. Fail2ban 配置

    本例为wordpress管理员登陆限制安装rpm -Uvh http://download.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.n ...

  3. 不失一般性和快捷性地判定决策单调(洛谷P1912 [NOI2009]诗人小G)(动态规划,决策单调性,单调队列)

    洛谷题目传送门 闲话 看完洛谷larryzhong巨佬的题解,蒟蒻一脸懵逼 如果哪年NOI(放心我这样的蒟蒻是去不了的)又来个决策单调性优化DP,那蒟蒻是不是会看都看不出来直接爆\(0\)?! 还是要 ...

  4. 通过 powershell 配置 IIS

    1. 设置iis pool: cls Import-Module WebAdministration Get-ChildItem IIS:\apppools | ForEach-Object{     ...

  5. rt-thread learning notes

    rt-thread learning notes 2018-01-15 > 001 具有相同优先级的线程,每个线程的时间片大小都可以在初始化或创建该线程时指定 rt_thread_t rt_th ...

  6. jieba分词器

    始终觉得官方文档是最好的学习途径.嗯,我只是一个大自然的搬运工.传送门https://github.com/fxsjy/jieba 1.分词 jieba.cut 方法接受三个输入参数: 需要分词的字符 ...

  7. A1075. PAT Judge

    The ranklist of PAT is generated from the status list, which shows the scores of the submittions. Th ...

  8. A1077. Kuchiguse

    The Japanese language is notorious for its sentence ending particles. Personal preference of such pa ...

  9. Java中如何将字符串数组转换成字符串

    如果将“字符串数组”转换成“字符串”,只能通过循环,没有其他方法: public static String getExecSqlString(String str){ StringBuffer sb ...

  10. JAVA Swing使用JFreeChart实现折线图绘制

    效果如下: 实现步骤: 1.导入JAR包 jfreechart官网下载的zip文件中包含这两个jar包 2.代码编写 import org.jfree.chart.ChartFactory; impo ...