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 ...
随机推荐
- Ubuntu上安装git和创建工作区和提交文件！！！
1.安装git: sudo apt-get install git 2.创建工作区: 创建一个文件夹,sudo mkdir 文件文件夹.告诉git这是个工作区文件夹,sudo git init 文件夹 ...
- Spark机器学习(5)：SVM算法
1. SVM基本知识 SVM(Support Vector Machine)是一个类分类器,能够将不同类的样本在样本空间中进行分隔,分隔使用的面叫做分隔超平面. 比如对于二维样本,分布在二维平面上,此 ...
- [3] MQTT,mosquitto,Eclipse Paho---怎样使用 Eclipse Paho MQTT工具来发送订阅MQTT消息？
在上两节,笔者主要介绍了 MQTT,mosquitto,Eclipse Paho的基本概念已经怎样安装mosquitto. 在这个章节我们就来看看怎样用 Eclipse Paho MQTT工具来发送接 ...
- 【Babble】批量学习与增量学习、稳定性与可塑性矛盾的乱想
一.开场白 做机器学习的对这几个词应该比较熟悉了. 最好是拿到全部数据,那就模型慢慢选,参数慢慢调,一轮一轮迭代,总能取得不错效果. 但是面对新来数据,怎么能利用已经训练好的模型,把新的信息加进去? ...
- 详解C#特性和反射（一）
使用特性(Attribute)可以将描述程序集的信息和描述程序集中任何类型和成员的信息添加到程序集的元数据和IL代码中,程序可以在运行时通过反射获取到这些信息: 一.通过直接或间接的继承自抽象类Sys ...
- 实战c++中的vector系列--vector<unique_ptr<>>初始化（全部权转移）
C++11为我们提供了智能指针,给我们带来了非常多便利的地方. 那么假设把unique_ptr作为vector容器的元素呢? 形式如出一辙:vector<unique_ptr<int> ...
- phpmyadmin登录提示mysqli_real_connect(): (HY000/2002): No such file or directory和mysql8登录失败的问题
网上的解决方法有很多,但都无法解决我的问题,最后在stackoverflow上找到解决方法,原文地址:https://stackoverflow.com/questions/41881123/mysq ...
- 第三部分：Android 应用程序接口指南---第二节：UI---第一章 用户界面和布局
第1章 用户界面和布局 应用程序的用户界面就是用户能看到并可以与它交互的任何东西.Android提供多种预置的UI组件,如结构化布局对象和允许你为应用程序创建图形用户界面的UI控件.Android也会 ...
- JUnit+Mockito结合测试Spring MVC Controller
[本文出自天外归云的博客园] 概要简述 利用JUnit结合Mockito,再加上spingframework自带的一些方法,就可以组合起来对Spring MVC中的Controller层进行测试. 在 ...
- 【WPF】自定义形状的按钮Button
需求:做一个如下图所示的多边形按钮. <!-- 特殊形状的按钮 --> <Grid> <Polygon Points="0,0 140,0 190,42 140 ...