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, when this event fired. Note that 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.

参考

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

transitionend

通用信息

属性

例

规范

浏览器兼容性

参考

文档标签和贡献者