//捕捉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. 关于一些php规范

    <?php /** * 符合psr-1,2的编程实例 * * @author GreenForestQuan */ namespace Standard; // 顶部命名空间 // 空一行 us ...

  2. bzoj2876 [NOI2012]骑行川藏(拉格朗日乘数法)

    题目描述 蛋蛋非常热衷于挑战自我,今年暑假他准备沿川藏线骑着自行车从成都前往拉萨.川藏线的沿途有着非常美丽的风景,但在这一路上也有着很多的艰难险阻,路况变化多端,而蛋蛋的体力十分有限,因此在每天的骑行 ...

  3. ps删除或覆盖内容

    除了选区删除.复制选区内容覆盖之外另外一种方法. 删掉字母"PS": 1. 矩形框选工具在字母上方画出选区 2. Ctrl+T,并拖拽底部以覆盖字母 3. 完成

  4. [记]WIndow/Linux 获取本机(全部)IPv4、IPv6、MAC地址方法 (C/C++)

    Linux 获取本机IP.MAC地址用法大全 //#include <sys/types.h> #include <ifaddrs.h> #include <sys/io ...

  5. 基于Ado.Net的日志组件

    软件开发,离不开对日志的操作,它可以帮助我们查找和检测问题.好的日志组件可以对于整个系统来说,至关重要 在NaviSoft产品中,日志组件也占有非常重要的份量.如下图所示,是组件的Db表结构设计 图- ...

  6. bzoj 3576[Hnoi2014]江南乐 sg函数+分块预处理

    3576: [Hnoi2014]江南乐 Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 1929  Solved: 686[Submit][Status ...

  7. OO(Object Oriented)

    封装.继承.多态. 封装:隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读取和修改的访问级别.封装就是将抽象得到的数据和行为相结合,形成一个有机的整体,也就是将数据与操作数据的代码进行有 ...

  8. PAT1119. Pre- and Post-order Traversals

    思路:中序遍历–根结点,左子树,右子树:后序遍历–左子树,右子树,根结点. 那么在找到根结点之后就可以开始划分左右子树了.左子树的先序第一个节点是根,左子树的后序最后一个节点是根. 例如 1 2 3 ...

  9. hdu 2048 递推&&错排

    直接贴出递推公式: cnt[n]=(i-1)*(cnt[n-1]+cnt[n-2]); 数组保存的是失败的种数 AC代码: #include<cstdio> const int maxn= ...

  10. 理解OAuth2.0认证

    一.什么是OAuth协议 OAuth 协议为用户资源的授权提供了一个安全的.开放而又简易的标准.与以往的授权方式不同之处是 OAuth的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方 ...