在看某個框架的文檔時發(fā)現(xiàn)了這兩個事件坡贺，以前了解的不多官辈，感覺這兩個事件還是挺有用的。
動畫事件
????????animationstart：事件在 CSS 動畫開始播放時觸發(fā)遍坟。
????????animationiteration：事件在 CSS 動畫重復(fù)播放時觸發(fā)拳亿。
????????animationend：事件在 CSS 動畫結(jié)束播放時觸發(fā)。
動畫事件.gif
過渡事件
????????transitionend：事件在 CSS 完成過渡后觸發(fā)愿伴。
過渡事件.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 事件觸發(fā) - 動畫已經(jīng)開始";
this.style.backgroundColor = "#ff2147";
}
function myIterationFunction() {
this.innerHTML = "animationiteration 事件觸發(fā) - 動畫重新播放";
this.style.backgroundColor = "yellow";
}
function myEndFunction() {
this.innerHTML = "animationend 事件觸發(fā) - 動畫已經(jīng)完成";
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 = "過渡事件觸發(fā) - 過渡已完成";
this.style.backgroundColor = "deeppink";
}
</script>
</body>
</html>
