js监听指定元素的css动画属性
MDN
监听css动画，开始，迭代次数，结束，中断
回调函数返回 animationEvent属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.a {
width: 100px;
height: 100px;
background: red;
animation: test 2.5s cubic-bezier(0.38, 0.88, 0.88, 1.37) 0s 2 alternate;
}
@keyframes test {
0% {
transform: rotate(0deg);
}
50%, 60%{
transform: rotate(120deg);
}
100% {
transform: rotate(30deg);
}
}
</style>
</head>
<body>
<div class="a"></div>
<script>
var target = document.querySelector('.a');
target.addEventListener('animationcancel', AnimationEvent=>{
// CSS Animation属性意外中断时派发出来
console.log( `animation cancel`);
});
target.addEventListener('animationstart', AnimationEvent=>{
// CSS Animation开始
console.log( `animation start`);
console.log( AnimationEvent);
});
target.addEventListener("animationiteration", AnimationEvent=>{
// 监听 iteration-cont
console.log('animation iteration')
});
target.addEventListener('animationend', AnimationEvent=>{
// CSS Animation结束
// css 意外的中断不会触发 end
console.log( `animation end`);
});
</script>
</body>
</html>
js监听指定元素的css动画属性的更多相关文章
- js监听某个元素高度变化来改变父级iframe的高度
最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...
- js监听dom元素内容变化
$("#divid").bind('DOMNodeInserted', function(e) { alert('element now contains: ' + $(e.tar ...
- waypoint+animate元素滚动监听触发插件实现页面动画效果
最近在做一个官网类型滚动加载动画,使用到waypoint监听事件插件和animate动画样式,两者结合完美实现向下滚动加载动画,但是没有做向上滚动撤消动画,留待以后有空研究 首先来介绍下jquery. ...
- 知识点---js监听手机返回键，回到指定界面
方法一. $(function(){ pushHistory(); window.addEventListener(“popstate”, function(e) { window.location ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- JS监听div的resize事件
原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...
随机推荐
- Linux下RocketMQ环境的配置
RocketMQ是一款分布式消息系统,最初是由阿里巴巴消息中间件团队研发并大规模应用于生产系统,满足线上海量堆积的需求,在去年捐赠给Apache开源基金会,并列为孵化项目,今年成功的正式成为了apac ...
- 解决 Firefox 下载文件名乱码扩展 ReDisposition
作者 muzuiget 发布 2013-03-13 19:23 标签 redisposition Firefox 下载文件名乱码问题由来已久,偶然一两次还可以手动改名,批量下载时简直要亲命,最终我 ...
- SNFAutoupdater通用自动升级组件V2.0
1.组件介绍 C/S构的特点是能充分发挥客户端的处理能力,很多工作可以由客户端处理后再提交给服务器,对应的优点就是客户端响应速度快模式客户端以其强大的功能,丰富的表现力受到相当大部分用户的青睐,但是客 ...
- qeephp 记录下
百度百科: https://baike.baidu.com/item/qeephp/8328612?fr=aladdin 官方地址: http://www.qeephp.cn/app/index.ph ...
- 物联网架构成长之路(9)-双机热备Keepalived了解
1. 前言 负载均衡LB,高可用HA,这一小结主要讲双机热备方案保证高可用.这里选择Keepalived作为双机热备方案,下面就对具体的配置进行了解.2. 下载Keepalived wget http ...
- Fluent动网格【8】：网格节点运动案例
Fluent动网格中的DEFINE_GRID_MOTION宏允许用户定义网格节点的运动.本案例演示采用DEFINE_GRID_MOTION宏指定边界节点的运动. 案例动网格效果如图所示. 案例描述 本 ...
- supervisor详解
1.什么是supervisor supervisor是用python写的一个进程管理工具,用来启动,重启,关闭进程. 2.supervisor的安装 pip install supervisor 3. ...
- [转]新人常识普及：我们为什么必须会git和maven
转自贴吧:http://tieba.baidu.com/p/3458400116 鉴于本吧多新人,新人又需要多交流才能进步,今天就给新人们讲讲git和maven的必要性,因为,他们的重要性,远远超过很 ...
- oracle 函数to_char(数据,'FM999,999,999,999,990.00') 格式化数据(转)
转载自:https://blog.csdn.net/fupengyao/article/details/52778565 遇到了oracle 取数格式问题,这里记一下 我们通常在做数据算数后,会想要让 ...
- Mysql 地区经纬度 查询
摘要: Mysql数据库,根据地区的经纬度信息,查询附近相邻的地区 2015-03-27 修改,增加 MySQL的空间扩展(MySQL Spatial Extensions)的解决方案: MySQL的 ...