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!

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.

参考