transitionend

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

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

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

Свойства

Свойство	Тип	Описание
`target` Только для чтения	`EventTarget`	Цель события (самая важная в дереве DOM).
`type` Только для чтения	`DOMString`	Тип события.
`bubbles` Только для чтения	`Boolean`	Будет ли событие нормально бить
`cancelable` Только для чтения	`Boolean`	Отменяемо ли событие?
`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.

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.

Метки документа и участники

Метки:

Внесли вклад в эту страницу: airspin, fscholz, akhabibullina

Обновлялась последний раз: airspin, 23 авг. 2017 г., 1:35:32