transitionend

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

通用信息

接口
TransitionEvent
是否冒泡
是
能否取消默认行为
是
目标
document, element
默认行为
无

属性

Property Type Description
target 只读 EventTarget The event target (the topmost target in the DOM tree).
type 只读 DOMString The type of event.
bubbles 只读 Boolean Whether the event normally bubbles or not
cancelable 只读 Boolean Whether the event is cancellable or not?
propertyName只读 DOMString The name of the CSS property associated with the transition.
elapsedTime只读 Float The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of transition-delay.
pseudoElement只读 DOMString The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).

例

/*
 * 在指定的元素上监听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.

浏览器兼容性

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.

参考

文档标签和贡献者