animationend 事件
實例
在CSS 動畫結束後為<div> 元素添加監聽事件:
var x = document.getElementById("myDIV");
// Chrome, Safari 和Opera 代碼
x.addEventListener("webkitAnimationEnd", myStartFunction);
// 標準語法
x.addEventListener("animationend", myStartFunction);
// Chrome, Safari 和Opera 代碼
x.addEventListener("webkitAnimationEnd", myStartFunction);
// 標準語法
x.addEventListener("animationend", myStartFunction);
嘗試一下»
定義和用法
animationend 事件在CSS 動畫完成後觸發。
更多關於CSS動畫的內容,請查看我們的CSS3動畫章節。
CSS 動畫播放時,會發生以下三個事件:
- animationstart - CSS動畫開始後觸發
- animationiteration - CSS動畫重複播放時觸發
- animationend - CSS 動畫完成後觸發
瀏覽器支持
表格中的數字表示支持該事件的第一個瀏覽器的版本號。
"webkit" 或"moz" 後面指定的數字為支持該事件的第一個版本號前綴。
事件 | |||||
---|---|---|---|---|---|
animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz | 4.0 webkit | 15.0 webkit 12.1 |
注意: Chrome, Safari和Opera瀏覽器使用webkitAnimationEnd前綴。
語法
object.addEventListener("webkitAnimationEnd", myScript ); // Chrome, Safari和Opera
object .addEventListener("animationend", myScript ); //標準語法
object .addEventListener("animationend", myScript ); //標準語法
注意: Internet Explorer 8及更早IE版本不支持addEventListener()方法。
技術細節
是否支持冒泡: | Yes |
---|---|
是否可以取消: | No |
事件類型: | AnimationEvent |
相關頁面
CSS教程: CSS3動畫
CSS參考手冊: CSS3動畫屬性
HTML DOM參考手冊: Style動畫屬性
事件對象