transitionend 事件
實例
在CSS 完成過渡後修改<div> 元素樣式及文字：
// Safari 3.1 到6.0 代碼
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// 標準語法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// 標準語法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
嘗試一下»
定義和用法
transitionend 事件在CSS 完成過渡後觸發。
注意：如果過渡在完成前移除，例如CSS transition-property屬性被移除，過渡事件將不被觸發。
更多關於CSS過渡，請查看我們的CSS3過渡 。
瀏覽器支持
表格中的數字表示支持該事件的第一個瀏覽器的版本號。
"webkit" 或"moz" 或"o" 指定的數字為支持該事件的第一個版本號前綴。
| Event | |||||
|---|---|---|---|---|---|
| transitionend | 26.0 4.0 為webkitTransitionEnd | 10.0 | 16.0 4.0 為mozTransitionEnd | 6.1 3.1 為webkitTransitionEnd | 12.1 10.5 為oTransitionEnd |
注意： Safari 3.1到6.0版本才支持該事件,使用webkitTransitionEnd前綴。
語法
object.addEventListener("webkitTransitionEnd", myScript ); // Safari 3.1到6.0代碼
object .addEventListener("transitionend", myScript ); // Standard syntax
object .addEventListener("transitionend", myScript ); // Standard syntax
注意： Internet Explorer 8及更早IE版本不支持addEventListener()方法。
技術細節
| 是否支持冒泡: | Yes |
|---|---|
| 是否可以取消: | Yes |
| 事件類型: | TransitionEvent |
相關頁面
CSS教程: CSS3過渡
CSS參考手冊: CSS3過渡屬性
CSS參考手冊: CSS3 transition-property屬性
事件對象