transitionend

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

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

Интерфейс: 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() {
    alert('Transition закончил свое выполнение');
}

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

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

Specification	Status	Comment
CSS Transitions Определение 'transitionend' в этой спецификации.	Рабочий черновик	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 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.