transitionend

transitionend 事件会在 CSS transition 结束后触发. 当transition完成前移除transition时，比如移除css的transition-property 属性，事件将不会被触发.如在transition完成前设置 display 为"none"，事件同样不会被触发。

是否冒泡	是
是否可取消	是
接口	`TransitionEvent`
事件处理器属性	`ontransitionend`

transitionend 事件是双向触发的 - 当完成到转换状态的过渡，以及完全恢复到默认或非转换状态时都会触发。如果没有过渡延迟或持续时间，即两者的值都为0s或者都未声明，则不发生过渡，并且任何过渡事件都不会触发。如果触发了 transitioncancel 事件，则transitionend 事件不会触发。

例

/*
 * 在指定的元素上监听transitionend事件, 例如#slidingMenu
 * 然后指定一个函数, 例如 showMessage()
 */
function showMessage() {
    console.log('Transition 已完成');
}

var element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", showMessage, false);

规范

Specification	Status	Comment
CSS Transitions transitionend	Working Draft	Initial definition.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0^[1] 36	4.0 (2.0)	10	10.5^[2] 12 12.10 23	3.2^[1] 7.0.6

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	2.1	4.0 (2.0)	?	10^[2] 12 12.10	3.2^[1]

[1] 在 Chrome 1.0, Android 2.1 与 WebKit 3.2 上实现 webkitTransitionEnd. Chrome 36 与 WebKit 7.0.6 上请使用标准事件 transitionend.

[2] 在 Opera 10.5 上实现oTransitionEnd，从版本12开始实现 otransitionend， 从版本12.10开始实现 transitionend.

参考

The TransitionEvent interface and the transitionend event.
transition, transition-delay, transition-duration, transition-property, transition-timing-function.

transitionend

例

规范

浏览器兼容性

参考