transitionend 事件

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

實例

在 CSS 完成過渡后修改 <div> 元素樣式及文字：

// Safari 3.1 到 6.0 代碼
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);

// 標(biāo)準(zhǔn)語法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

嘗試一下 ?

定義和用法

transitionend 事件在 CSS 完成過渡后觸發(fā)。

注意： 如果過渡在完成前移除，例如 CSS transition-property 屬性被移除，過渡事件將不被觸發(fā)。

更多關(guān)于 CSS 過渡，請查看我們的CSS3 過渡。

瀏覽器支持

表格中的數(shù)字表示支持該事件的第一個瀏覽器的版本號。

"webkit" 或 "moz" 或 "o" 指定的數(shù)字為支持該事件的第一個版本號前綴。

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() 方法。

技術(shù)細(xì)節(jié)
是否支持冒泡:Yes
是否可以取消:Yes
事件類型:TransitionEvent

相關(guān)頁面

CSS 教程: CSS3 過渡

CSS 參考手冊: CSS3 過渡屬性

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


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