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动画所查阅的一些好的资料,并附上两个 ...
随机推荐
- VS2015 (C/C++) 生成的程序,不能在server2008上运行
项目本来是为Linux下运行做的,但是客户环境需要在windows下运行,幸好用的一些库是跨平台的. 于是用vs2015编译. 然后就发现在2008上却运行时库,装了2015的运行时库后, 在运行,就 ...
- 【HTTP协议】---TCP三次握手和四次挥手
TCP三次握手和四次挥手 首先我们知道HTTP协议通常承载于TCP协议之上,HTTPS承载于TLS或SSL协议层之上 通过上面这张图我们能够知道. 在Http工作之前,Web浏览器通过网络和W ...
- Linux 编译安装 php 扩展包 curl
php源码目录:/root/php php编译目录:/usr/local/webserver/php/ curl源码目录:/root/curl 1.curl,主要用于发送http请求,是php的一个扩 ...
- Hibernate学习(二)保存数据
package cn.lonecloud.test; import java.util.Date; import org.hibernate.HibernateException; import or ...
- 初识vue——起步
一.目录结构: 我们经常使用的是以下几个目录: 1.assets:静态资产文件:在vue组件中,所有组件中,所有模板和CSS都会被vue-html-loader和css-loader解析,并查找资源u ...
- MySQL主从复制_复制过滤
关于主从过滤,建议只在从服务器做设定,在Master 端为保证二进制日志的完整, 不建议使用二进制日志过滤. Master 可用参数: binlog-do-db= #定义白名单,仅将制定数据库的相关操 ...
- Oauth认证协议
原文地址腾讯QQ第三方登录的实现原理? Oauth当中的角色: 1.Service Provider(服务提供方): 服务提供方通常是网站,在这些网站当中存储着一些受限制的资源,如照片.视频.联系人列 ...
- PAT All Roads Lead to Rome 单源最短路
思路:单源最短路末班就好了,字符串映射成数字处理. AC代码 //#define LOCAL #include <stdio.h> #include <string.h> #i ...
- Google2016 面试题 吹气球 区间dp
题意:有n个气球,编号为0到n-1,每个气球都有一个分数,存在nums数组中.每次吹气球i可以得到的分数为 nums[left] * nums[i] * nums[right],left和right分 ...
- php面试上机题(2018-3-3)
需求:将第三方api的前3000条数据全部读取出来,存入对应的数据库字段 第三方api:http://pub.cloudmob.mobi/publisherapi/offers/?uid=92& ...