1. //捕捉webkitAnimationEnd事件
  2. element.addEventListener('webkitAnimationEnd', end, false);
  3.  
  4. //捕捉webkitTransitionEnd事件
  5. element.addEventListener('webkitTransitionEnd', end, false);
  6.  
  7. function end(event){
  8. console.log(event.propertyName)
  9. }
  10. function transitionEnd(e){
  11. //e.propertyName 存在兼容问题,需用能力检测函数
  12. // transform / -moz-transform / -ms-transform
  13.  if(e.propertyName=="-webkit-transform"){
  14.    this.parentNode.style.visibility="hidden";
  15.  }
  16. }
  1.  
  1.  

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. Spring Task定时任务Scheduled

    Spring的任务调度,采用注解的形式 Spring中@Scheduled的用法. spring的配置文件如下,先扫描到任务的类,打开spirng任务的标签 <beans xmlns=" ...

  2. angular2^ typescript 将 文件和Json数据 合并发送到服务器(1.客户端处理)

    首先介绍下框架基本流程   (web > webservice  [前端架构] ) > (nodejs [ 数据中转站 ]) >(api [后台接口]) --web (html  a ...

  3. 借腾讯开源 VasDolly,谈谈 Android 签名和多渠道打包的原理!

    一.前言 Hi,大家好,我是承香墨影! 当我们需要发布一款 App 到应用市场的时候,一般需要我们针对不同的市场生产不同的渠道包,它们使用的是同一套代码,只是会包含一些各自的渠道信息,用于我们做数据分 ...

  4. Java经典编程题50道之二十七

    求100之内的素数. public class Example27 {    public static void main(String[] args) {        prime();    } ...

  5. springmvc+mybatis+mysql 数据库插入中文是乱码

    java web项目,前台页面的表单数据,插入到数据库时,结果出现乱码"???"的问题,断断续续折腾了一天时间,废话不说,步骤如下: 一:在web.xml中配置:编码格式拦截器 & ...

  6. 利用Azure嵌套虚拟化,解决公有云上机器不能启动的问题

    很多时候我们都会碰到因为意外重启,机器硬盘被损坏导致无法启动,或者是因为各种原因Windows上的RDP服务启动不了,Linux上的SSH无法链接等等问题.碰到这种问题基本上很难解决以前都是将VHD下 ...

  7. php中datetime时间和int时间互相转换

    int时间转换datetime时间 echo date("Y-m-d H:i:s", 1210003200);  datetime时间转换int时间 echo  strtotime ...

  8. Windows Sublime Text 配置Linux子系统(WSL)下的 gcc/g++ 编译环境

    0. 简介(若已了解背景可以跳过此部分) Windows 10 Build 14316以上版本中加入了"Windows系统的Linux子系统"(Windows Subsystem ...

  9. UVA - 1631 Locker 记忆化搜索

    题意:给定两个密码串,每次可以让1~3个相邻的密码向上或者向下滚动,每个密码是 ,问最少需要多少次滚动可以让原串成为目标串? 思路:假设当前要让第i位密码还原,我们可以同时转动,不同的转动方式会影响后 ...

  10. HDU - 3001 Travelling 状压dp + 三进制 [kuangbin带你飞]专题二

    终于刷完搜索专题了. 题意:给定n个城市,每个城市参观不能超过两次,两个城市之间有道路通过需要花费X,求通过能所有城市的最小花费. 思路:每个城市有三个状态0,1,2,可用三进制存储所有城市的访问状态 ...