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 屬性被移除，過渡事件將不被觸發。

更多關於 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

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技術細節
是否支持冒泡: Yes
是否可以取消: Yes
事件類型: TransitionEvent

相關頁面

CSS 教學: CSS3 過渡

CSS 參考手冊: CSS3 過渡屬性

CSS 參考手冊: CSS3 transition-property 屬性


事件對象參考手冊 事件對象