JS中的动画事件和过渡事件
2017-11-16 本文已影响51人
辣瓜瓜
在看某个框架的文档时发现了这两个事件，以前了解的不多，感觉这两个事件还是挺有用的。
动画事件
animationstart：事件在 CSS 动画开始播放时触发。
animationiteration：事件在 CSS 动画重复播放时触发。
animationend：事件在 CSS 动画结束播放时触发。
动画事件.gif
过渡事件
transitionend：事件在 CSS 完成过渡后触发。
过渡事件.gif
动画事件demo
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#myDIV {
margin: 100px;
width: 400px;
height: 100px;
line-height: 100px;
background: pink;
position: relative;
font-size: 18px;
text-align: center;
}
@-webkit-keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
@keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
</style>
</head>
<body>
<div id="myDIV" onclick="myFunction()">点击</div>
<script>
var x = document.getElementById("myDIV")
function myFunction() {
x.style.WebkitAnimation = "mymove 5s 3 ease";
x.style.animation = "mymove 5s 3 ease";
}
x.addEventListener("webkitAnimationStart", myStartFunction);
x.addEventListener("webkitAnimationIteration", myIterationFunction);
x.addEventListener("webkitAnimationEnd", myEndFunction);
x.addEventListener("animationstart", myStartFunction);
x.addEventListener("animationiteration", myIterationFunction);
x.addEventListener("animationend", myEndFunction);
function myStartFunction() {
this.innerHTML = "animationstart 事件触发 - 动画已经开始";
this.style.backgroundColor = "#ff2147";
}
function myIterationFunction() {
this.innerHTML = "animationiteration 事件触发 - 动画重新播放";
this.style.backgroundColor = "yellow";
}
function myEndFunction() {
this.innerHTML = "animationend 事件触发 - 动画已经完成";
this.style.backgroundColor = "#3300ff";
this.style.color = "#fff";
}
</script>
</body>
</html>
过渡事件demo
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#myDIV {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
margin: 100px;
}
#myDIV:hover {
width: 400px;
}
</style>
</head>
<body>
<div id="myDIV">鼠标移动到 div 元素上</div>
<script>
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
function myFunction() {
this.innerHTML = "过渡事件触发 - 过渡已完成";
this.style.backgroundColor = "deeppink";
}
</script>
</body>
</html>
