MDN

监听css动画，开始，迭代次数，结束，中断

回调函数返回 animationEvent属性

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title></title>
  6.   <style media="screen">
  7.     .a {
  8.       width: 100px;
  9.       height: 100px;
  10.       background: red;
  11.       animation: test 2.5s cubic-bezier(0.38, 0.88, 0.88, 1.37) 0s 2 alternate;
  12.     }
  14.     @keyframes test {
  15.       0% {
  16.         transform: rotate(0deg);
  17.       }
  18.       50%, 60%{
  19.         transform: rotate(120deg);
  20.       }
  21.       100% {
  22.         transform: rotate(30deg);
  23.       }
  24.     }
  25.   </style>
  26. </head>
  28. <body>
  29.   <div class="a"></div>
  30.   <script>
  31.     var target = document.querySelector('.a');
  32.     target.addEventListener('animationcancel', AnimationEvent=>{
  33.       // CSS Animation属性意外中断时派发出来
  34.       console.log( `animation cancel`);
  35.     });
  36.     target.addEventListener('animationstart', AnimationEvent=>{
  37.       // CSS Animation开始
  38.       console.log( `animation start`);
  39.       console.log( AnimationEvent);
  40.     });
  41.     target.addEventListener("animationiteration", AnimationEvent=>{
  42.         // 监听 iteration-cont
  43.         console.log('animation iteration')
  44.     });
  45.     target.addEventListener('animationend', AnimationEvent=>{
  46.       // CSS Animation结束
  47.       // css 意外的中断不会触发 end
  48.       console.log( `animation end`);
  49.     });
  50.   </script>
  51. </body>
  53. </html>

js监听指定元素的css动画属性的更多相关文章

  1. js监听某个元素高度变化来改变父级iframe的高度

    最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...

  2. js监听dom元素内容变化

    $("#divid").bind('DOMNodeInserted', function(e) { alert('element now contains: ' + $(e.tar ...

  3. waypoint+animate元素滚动监听触发插件实现页面动画效果

    最近在做一个官网类型滚动加载动画,使用到waypoint监听事件插件和animate动画样式,两者结合完美实现向下滚动加载动画,但是没有做向上滚动撤消动画,留待以后有空研究 首先来介绍下jquery. ...

  4. 知识点---js监听手机返回键，回到指定界面

    方法一. $(function(){ pushHistory(); window.addEventListener(“popstate”, function(e) { window.location ...

  5. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  6. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  7. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  8. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  9. JS监听div的resize事件

    原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...

随机推荐

  1. GeoHash原理和可视化显示

    最近在做附近定位功能的产品,geohash是一个非常不错的实现方式.查询资料,发现阿里的这篇文章讲解的很好.但文中并没有给出geohash显示的工具.无奈,也没有查到类似的.只好自己简单显示一下,方便 ...

  2. nodejs sass安装报错一招解决

    背景: 这个问题不是一天两天了,有时候是网速不行,有时候是被墙了,有时候是github把node-sass的包转移目录导致下载失败. Cannot download "https://git ...

  3. mipmap和drawable文件夹的区别

    在Android上创建工程,会默认创建mipmap文件夹.之前在Eclipse上创建的是drawable的文件夹.那么这两个有什么区别呢? 问题: I'm working with android s ...

  4. WIN10平板 传递优化文件能否删除

    在给系统准备做Ghost备份之前,一般会运行一次磁盘清理,但是WIN10系统多了一个传递优化文件(现在看到的体积很小,但其实可能是4-5G) 这个文件只是WIN10改进了系统更新策略产生的,就像是BT ...

  5. C# Chart使用总结 1 ---------关于图表数据的来源

    关于图表数据的来源: 1.通过XValueMember YValueMembers 设置 OleDbConnection conn = new OleDbConnection(connStr); Ol ...

  6. [转]Visual Studio 2010 中安装Qt 5.1

    截至目前(2013年7月12日)为止,Qt 的最高版本为Qt5.1,在该版本中已经将Qt Creator与Qt Lib集成在一个文件夹中,因此安装的时候较为方便,只需安装一个即可.因为Qt具有超强的可 ...

  7. 浏览器URL参数解决方案

    function getUrlParams() { var search = window.location.search; // 写入数据字典 , search.length).split(&quo ...

  8. Warning: Function created with compilation errors.

    SQL> create or replace function 2 remove_constants(p_query in varchar2) return varchar2 3 as 4 l_ ...

  9. 转 HashMap 比较透彻的分析

    HashMap 的实现原理 原文: HashMap 的实现原理 众所周知,HashMap是用来存储Key-Value键值对的一种集合,这个键值对也叫做Entry,而每个Entry都是存储在数组当中,因 ...

  10. java多线程状态

    造成线程进入阻塞状态的情况大致可分为: 1.调用sleep()方法 2.调用阻塞式IO方法 3. 4.等待通知 5.调用suspend(),程序挂起.