//捕捉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. 📉 Draggable Curve Control (English)

    Conmajia 2012 Updated on Feb. 18, 2018 In Photoshop, there is a very powerful feature called Curve A ...

  2. 文件读写io操作范例

    系统io读写,copy int main(int argc, char **argv) {  if(argc != 3) {   printf("Usage: %s <src> ...

  3. ConcurrentHashMap源码分析(一)

    本篇博客的目录: 前言 一:ConcurrentHashMap简介 二:ConcurrentHashMap的内部实现 三:总结 前言:HashMap很多人都熟悉吧,它是我们平时编程中高频率出现的一种集 ...

  4. python学习:调用其他函数

    vim wc.py   #!/usr/bin/python   def wordCount(s):     chars = len(s)     words = len(s.split())     ...

  5. ftp服务器的简单配置使用

    yum install -y vsftpd systemctl start vsftpd   cd /var/ftp/pub/   mkdir 111   touch weifeng.txt     ...

  6. 使用IPTABLES限制IP上传下载速度,如何用iptables限速?

    怎样使用IPTABLES限制IP上传下载速度,如何用iptables限速?我们先来看范例: iptables限制某IP的上传速度为1000KB/秒(8Mbps,流入服务器带宽),即在此IP所在的服务器 ...

  7. C/C++语言简介之编程开发

    一.编译器 GCC:GNU组织开发的开源免费的编译器. MinGW:Windows操作系统下的GCC. Clang:开源的BSD协议的基于LLVM的编译器. Visual C++:Microsoft ...

  8. Yii2 给iOS App写推送的接口

    public function actionApns() { //手机注册时候返回的设备号,在xcode中输出的,复制过来去掉空格 $deviceToken = '7217a01836349b194b ...

  9. POJ - 3268 单源最短路

    题意:给定一些有向边,以及一个目的地,从某个点到达目的地,再从目的地回到那个点.共有n个点,问这n个点花费最大是多少? 思路:从目的地回去直接把目的地作为源点即可.那么从某个点到达目的地应该如何得到最 ...

  10. git 命令和使用场景总结

    资料地址:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000    http://w ...