acara permulaan animasi
animationstart Event
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
margin: 25px;
width: 550px;
height: 100px;
background: orange;
position: relative;
font-size: 20px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<p>该实例使用了 addEventListener() 方法为 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。</p>
<div id="myDIV" onclick="myFunction()">点我开始动画</div>
<script>
var x = document.getElementById("myDIV")
// 使用 JavaScript 开始动画
function myFunction() {
x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari 和 Opera 代码
x.style.animation = "mymove 4s 2";
}
// Chrome, Safari 和 Opera
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 = "pink";
}
function myIterationFunction() {
this.innerHTML = "animationiteration 事件触发 - 动画重新播放";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "animationend 事件触发 - 动画已经完成";
this.style.backgroundColor = "lightgray";
}
</script>
</body>
</html>Run Instance»
Klik Butang "Jalankan contoh" untuk melihat tika dalam talian
Definisi dan penggunaan
Acara animationstart dicetuskan apabila animasi CSS mula dimainkan.
Untuk mendapatkan maklumat lanjut tentang animasi CSS, lihat bab Animasi CSS3 kami.
Apabila animasi CSS dimainkan, tiga peristiwa berikut akan berlaku:
- animationstart - dicetuskan apabila animasi CSS bermula
- animationiteration - dicetuskan apabila animasi CSS dimainkan berulang kali
- animationend - dicetuskan selepas animasi CSS selesai
Sokongan penyemak imbas
Nombor dalam jadual menunjukkan nombor versi penyemak imbas pertama yang menyokong acara ini.
Nombor yang dinyatakan selepas "webkit" atau "moz" ialah awalan nombor versi pertama yang menyokong acara ini.
| Acara |
| ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| animationstart | 4.0 webkit | 10.0 | 16.0 5.0 moz | 4.0 webkit | kit web 15.012.1 |
Nota:
objek Digunakan oleh penyemak imbas Chrome, Safari dan Opera
webkitAnimationEnd awalan. Tatabahasa
object.addEventListener("webkitAnimationStart", myScript
); // Kod untuk Chrome, Safari dan Opera
object.addEventListener("webkitAnimationStart", myScript
); // Kod untuk Chrome, Safari dan Opera
.addEventListener("animationstart", myScript); // Sintaks standard
| 是否支持冒泡: | Yes |
|---|---|
| 是否可以取消: | No |
| 事件类型: | AnimationEvent |
Nota:
Internet Explorer 8 dan versi IE yang lebih awal tidak menyokong kaedah addEventListener().
Butiran Teknikal
Halaman Berkaitan
Tutorial CSS: Animasi CSS3
