transitionend 事件
示例
當 CSS 過渡結束時，對 <div> 元素執行某些操作
// Safari 3.1 到 6.0 的程式碼
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// 標準語法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
自己動手試一試 »
描述
transitionend 事件在 CSS 過渡完成時發生。
注意：如果過渡在完成前被移除，例如 CSS transition-property 屬性被移除，則 transitionend 事件不會觸發。
有關 CSS 過渡的更多資訊，請參閱我們的 CSS3 過渡 教程。
語法
object.addEventListener("webkitTransitionEnd", myScript); // Safari 3.1 到 6.0 的程式碼
object.addEventListener("transitionend", myScript); // 標準語法
技術詳情
| 冒泡 | 是 |
|---|---|
| 可取消 | 是 |
| 事件型別 | TransitionEvent |
| DOM 版本 | Level 3 Events |
相關頁面
CSS 教程: CSS3 過渡
CSS 參考: CSS3 transition 屬性
CSS 參考: CSS3 transition-property 屬性
瀏覽器支援
event.transitionEnd 是 DOM Level 3 (2004) 功能。
所有現代瀏覽器都完全支援它
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
