transitionend

Событие transitionend срабатывает, когда CSS transition закончил свое выполнение. В случае, когда анимация удаляется до ее завершения(например, если transition-property [en-US] удаляется), то событие не срабатывает.

Общая информация

Интерфейс: TransitionEvent
Вспылывает: Да
Отменяемое: Да
Элемент: document, element
Действие по умолчанию: Нет

Свойства

Property	Type	Description
`target` Read only	`EventTarget`	The event target (the topmost target in the DOM tree).
`type` Read only	`DOMString`	The type of event.
`bubbles` Read only	`boolean`	Does the event normally bubble?
`cancelable` Read only	`boolean`	Is it possible to cancel the event?
`propertyName`Read only	`DOMString`	The name of the CSS property associated with the transition.
`elapsedTime`Read only	`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`Read only	`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() {
    alert('Transition закончил свое выполнение');
}

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

Спецификация

Specification	Status	Comment
CSS Transitions Определение 'transitionend' в этой спецификации.	Рабочий черновик	Initial definition.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0 as `webkitTransitionEnd`	4.0 (2.0)	10	10.5 as `oTransitionEnd` 12 as `otransitionend` 12.10 as `transitionend`	3.2 as `webkitTransitionEnd`

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	2.1 as `webkitTransitionEnd`	4.0 (2.0)	?	10 as `oTransitionEnd` 12 as `otransitionend` 12.10 as `transitionend`	3.2 as `webkitTransitionEnd`

Также

The TransitionEvent interface and the transitionend event.