transitionend

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

Событие 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).

Пример

js
/*
 * Обрабатывать событие transitionend на определённом элементе, т.е. #slidingMenu
 * Затем, вызвать определённую функцию, т.е. showMessage()
 */
function showMessage() {
  alert("Transition закончил своё выполнение");
}

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

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

Specification
CSS Transitions
# transitionend

Совместимость с браузерами

Также