//捕捉webkitAnimationEnd事件
element.addEventListener('webkitAnimationEnd', end, false); //捕捉webkitTransitionEnd事件
element.addEventListener('webkitTransitionEnd', end, false); function end(event){
console.log(event.propertyName)
}
function transitionEnd(e){
//e.propertyName 存在兼容问题,需用能力检测函数
// transform / -moz-transform / -ms-transform
 if(e.propertyName=="-webkit-transform"){
   this.parentNode.style.visibility="hidden";
 }
}
 
												

css3动画结束捕捉事件整理的更多相关文章

  1. CSS3动画以及animation事件

    1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction an ...

  2. 监听css3的animation动画和transition事件

    webkit-animation动画有三个事件: 开始事件: webkitAnimationStart 结束事件: webkitAnimationEnd 重复运动事件: webkitAnimation ...

  3. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  4. JS如何监听动画结束

    场景描述 在使用JS控制动画时一般需要在动画结束后执行回调去进行DOM的相关操作,所以需要监听动画结束进行回调.JS提供了以下事件用于监听动画的结束,简单总结学习下. CSS3动画监听事件 trans ...

  5. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  6. CSS3动画事件

    CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...

  7. js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

    css3的过渡属性transition,在动画结束时,也存在结束的事件:webkitTransitionEnd; 注意:transition,也仅仅有这一个事件. http://www.runoob. ...

  8. CSS3 动画触发事件

    @keyframes mymove { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blu ...

  9. css3动画学习资料整理

    现在主流浏览器(先不管IE8,IE9吧),尤其是移动端浏览器基本都支持css3了,为了增强页面的表现力,css3动画必不可少了.这篇文章主要整理一下我在学习css3动画所查阅的一些好的资料,并附上两个 ...

随机推荐

  1. LeetCode - 540. Single Element in a Sorted Array

    Given a sorted array consisting of only integers where every element appears twice except for one el ...

  2. 【Javascript】在文本框光标处插入文字并定位光标 (转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. java设计模式-----2、工厂方法模式

    再看工厂方法模式之前先看看简单工厂模式 工厂方法模式(FACTORY METHOD)同样属于一种常用的对象创建型设计模式,又称为多态工厂模式,此模式的核心精神是封装类中不变的部分,提取其中个性化善变的 ...

  4. Apache服务器安装-apache已经卸载,如何删除注册在系统的服务

    cmd进入windows的命令行客户端,执行:sc delete apache 注意:以管理员的身份删除,同理,此方法也可以删除其他类似的服务.例如sc delete MongoDB.

  5. 阿里巴巴分布式服务框架 Dubbo 介绍

    Dubbo是阿里巴巴内部的SOA服务化治理方案的核心框架,每天为2000+ 个服务提供3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点.Dubbo自2011年开源后, ...

  6. python爬虫之基本知识

    随着数据的海量增长,我们需要在互联网上选取所需要的数据进行自己研究的分析和实验.这就用到了爬虫这一技术,下面就跟着小编一起初遇python爬虫! 一.请求-响应 在利用python语言实现爬虫时,主要 ...

  7. 如何高效的编写Verilog HDL——进阶版

    博主之前写过一篇文章来谈论如何高效的编写Verlog HDL——菜鸟版,在其中主要强调了使用Notepad++来编写Verilog HDL语言的便捷性,为什么说是菜鸟版呢,因为对于新手来说,在还没有熟 ...

  8. Linux shell的问题

    1.uptime命令可以查看当前系统的启动时间: w命令显示当前登录者top命令显示当前任务ps命令显示所有进程信息 uptime命令可以查看系统启动时间   2.使用shell时,默认的环境变量放在 ...

  9. bootstrap模态对话框

    bootstrap模态对话框 前提是引入bootstrap的css和js的东西 data-backdrop="static"代表的是点击旁边的内容,不进行关闭操作,但是esc的时候 ...

  10. Storm实践

    1.Storm命令 在Linux中观直接输入Storm,不带任何参数信息,可以查看Storm命令. 参考这里 1.  activate 激活指定的拓扑Spout.语法:storm activate t ...