css3动画结束捕捉事件整理
//捕捉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动画结束捕捉事件整理的更多相关文章
- CSS3动画以及animation事件
1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction an ...
- 监听css3的animation动画和transition事件
webkit-animation动画有三个事件: 开始事件: webkitAnimationStart 结束事件: webkitAnimationEnd 重复运动事件: webkitAnimation ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- JS如何监听动画结束
场景描述 在使用JS控制动画时一般需要在动画结束后执行回调去进行DOM的相关操作,所以需要监听动画结束进行回调.JS提供了以下事件用于监听动画的结束,简单总结学习下. CSS3动画监听事件 trans ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- CSS3动画事件
CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...
- js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件
css3的过渡属性transition,在动画结束时,也存在结束的事件:webkitTransitionEnd; 注意:transition,也仅仅有这一个事件. http://www.runoob. ...
- CSS3 动画触发事件
@keyframes mymove { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blu ...
- css3动画学习资料整理
现在主流浏览器(先不管IE8,IE9吧),尤其是移动端浏览器基本都支持css3了,为了增强页面的表现力,css3动画必不可少了.这篇文章主要整理一下我在学习css3动画所查阅的一些好的资料,并附上两个 ...
随机推荐
- 使用echarts水球图
使用echarts水球图 官方实例中没有水球图样式,当我们需要用到水球图的时候需要下载echarts-liquidfill.js. 使用 在echarts之后引入 echarts-liquidfill ...
- shell编程值之正则表达式与字符截取(6)
正则表达式与通配符 正则表达式用来在文件中匹配符合条件的字符串,正则是包含匹配.grep.awk.sed等命令可以支持正则表达式 通配符用来匹配符合条件的文件名,通配符是完全匹配.ls.find.cp ...
- PyCharm安装及使用
搭建环境 1.win10_X64,其他Win版本也可以. 2.PyCharm版本:Professional-2016.2.3. 搭建准备 1.到PyCharm官网下载PyCharm安装包. Dow ...
- 借助Maven入手Spring Boot第一个程序
目前网上有不少Spring Boot的入门文章,都很有帮助,本人最近在深入学习Spring Cloud,在搭建第一个Hello World程序时,感觉对于新手而言,介绍文章怎么详细都不为过,因为其中坑 ...
- centos安装软件依赖问题
yum install gcc gcc-c++ ncurses-devel perl 基础包安装
- Java经典编程题50道之四十七
读取7个数(1~50)的整数值,每读取一个值,程序打印出该值个数的*. public class Example47 { public static void main(String[] arg ...
- C/C++语言简介之关键字
关键字又称为保留字,就是已被C语言本身使用,不能作其它用途使用的字.例如关键字不能用作变量名.函数名等标识符.由ISO标准定义的C语言关键字共32个:auto.double.int.struct.br ...
- C/C++语言简介之语言组成
一.数据类型 C的数据类型包括:整型.字符型.实型或浮点型(单精度和双精度).枚举类型.数组类型.结构体类型.共用体类型.指针类型和空类型. 二.常量与变量 常量其值不可改变,符号常量名通常用大写. ...
- JPA数据懒加载LAZY和实时加载EAGER(二)
懒加载LAZY和实时加载EAGER的概念,在各种开发语言中都有广泛应用.其目的是实现关联数据的选择性加载,懒加载是在属性被引用时,才生成查询语句,抽取相关联数据.而实时加载则是执行完主查询后,不管是否 ...
- Java注释用处
1.Java注释: import cn.lonecloud.Doc; /** * Created by lonecloud on 2017/8/17. * 测试注释类型 {@link Doc#test ...