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动画所查阅的一些好的资料,并附上两个 ...
随机推荐
- LeetCode - 654. Maximum Binary Tree
Given an integer array with no duplicates. A maximum tree building on this array is defined as follo ...
- [Python Study Notes] 编程仪式感的Hello World!
学习还是要有一点仪式感的,学单片机第一步,点个灯:学编程第一步,hello world! C:\Users\Liu>python Python 3.6.4 (v3.6.4:d48eceb, De ...
- Vi/Vim的快捷方式
1 vi/ vim键盘图 2 文字解说 进入编辑模式的6种方式: i在光标前插入 I在行首插入 a在光标后插入 A在行末插入 o在下一行插入 O在上一行插入 删除字符 x 删除当前字符 X 删除前一个 ...
- hplus--H+ V2.3 (中文版)
一个高大上的后台模板 演示地址 http://www.zi-han.net/theme/hplus/?v=4.1 下载地址 http://download.csdn.net/detail/u01197 ...
- MYSQL EXPLAIN执行计划命令详解(支持更新中)
本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 摘要: 本篇是根据官网中的每个一点来翻译.举例.验证的:英语不好,所 ...
- os模块中关于文件/目录常用的函数使用方法
os模块中关于文件/目录常用的函数使用方法 函数名 使用方法 getcwd() 返回当前工作目录 chdir(path) 改变工作目录 listdir(path='.') 列举指定目录中的文件名('. ...
- [翻译]编写高性能 .NET 代码 第一章:工具介绍 -- Visual Studio
<<返回目录 Visual Studio vs虽然不是全宇宙唯一的IDE,但它是.net开发人员最常用的开发工具.它自带一个性能分析工具,你可以使用它来做开发,不同的vs版本在工具上会略有 ...
- maven The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path错误
对于这个问题的话,请在pom文件中加入 <dependency> <groupId>javax.servlet</groupId> <artifactId&g ...
- Java系统监控(淘汰sigar)
Sigar是Hyperic-hq产品的基础包,是Hyperic HQ主要的数据收集组件.它用来从许多平台收集系统和处理信息. 这些平台包括:Linux, Windows, Solaris, AIX, ...
- uva1471 二叉搜索树
此题紫书上面有详细分析,关键是运用Set优化实现O(nlgn)复杂度 AC代码: #include<cstdio> #include<set> #include<algo ...