JavaScript 參考手冊
/ animationstart 事件
animationstart 事件
animationstart 事件
實(shí)例
<!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>該實(shí)例使用了 addEventListener() 方法為 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。</p>
<div id="myDIV" onclick="myFunction()">點(diǎn)我開始動(dòng)畫</div>
<script>
var x = document.getElementById("myDIV")
// 使用 JavaScript 開始動(dòng)畫
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 事件觸發(fā) - 動(dòng)畫已經(jīng)開始";
this.style.backgroundColor = "pink";
}
function myIterationFunction() {
this.innerHTML = "animationiteration 事件觸發(fā) - 動(dòng)畫重新播放";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "animationend 事件觸發(fā) - 動(dòng)畫已經(jīng)完成";
this.style.backgroundColor = "lightgray";
}
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
定義和用法
animationstart 事件在 CSS 動(dòng)畫開始播放時(shí)觸發(fā)。
更多關(guān)于 CSS 動(dòng)畫的內(nèi)容，請查看我們的CSS3 動(dòng)畫 章節(jié)。
CSS 動(dòng)畫播放時(shí)，會發(fā)生以下三個(gè)事件：
- animationstart - CSS 動(dòng)畫開始后觸發(fā)
- animationiteration - CSS 動(dòng)畫重復(fù)播放時(shí)觸發(fā)
- animationend - CSS 動(dòng)畫完成后觸發(fā)
瀏覽器支持
表格中的數(shù)字表示支持該事件的第一個(gè)瀏覽器的版本號。
"webkit" 或 "moz" 后面指定的數(shù)字為支持該事件的第一個(gè)版本號前綴。
| 事件 | |||||
|---|---|---|---|---|---|
| animationstart | 4.0 webkit | 10.0 | 16.0 5.0 moz | 4.0 webkit | 15.0 webkit 12.1 |
注意： Chrome, Safari 和 Opera 瀏覽器使用 webkitAnimationEnd 前綴。
語法
object.addEventListener("webkitAnimationStart", myScript);
// Code for Chrome, Safari and Opera
object.addEventListener("animationstart", myScript); // Standard syntax
object.addEventListener("animationstart", myScript); // Standard syntax
注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
技術(shù)細(xì)節(jié)
| 是否支持冒泡: | Yes |
|---|---|
| 是否可以取消: | No |
| 事件類型: | AnimationEvent |
相關(guān)頁面
CSS 教程: CSS3 動(dòng)畫
CSS 參考手冊: CSS3 動(dòng)畫屬性
HTML DOM 參考手冊: Style 動(dòng)畫屬性