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)

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.

参考