Элемент: событие transitionend

Событие transitionend генерируется, когда завершается CSS-анимация. В случае, если анимация удаляется до завершения, например, если свойство transition-property удалено или display установлено в значение none, событие не сгенерируется.

Событие transitionend генерируется в обоих направлениях — когда элемент завершает переход в целевое состояние и когда он полностью возвращается в исходное или неанимированное состояние. Если нет задержки или продолжительности анимации (обе равны 0 или ни одно из них не задано), анимации нет, и никакие события анимации не генерируются. Если сгенерировано событие transitioncancel , событие transitionend не будет сгенерировано.

Это событие нельзя отменить.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика события.

addEventListener("transitionend", (event) => {});

ontransitionend = (event) => {};

Объект TransitionEvent. Наследуется от Event.

Также наследует свойства от родительского класса Event.

TransitionEvent.propertyName Только для чтения

Строка, содержащая имя свойства CSS, связанного с анимацией.

TransitionEvent.elapsedTime Только для чтения

Значение с плавающей точкой, представляющее время работы анимации в секундах в момент срабатывания события. Это значение не зависит от свойства transition-delay.

TransitionEvent.pseudoElement Только для чтения

Строка, начинающаяся с ::, содержащая имя псевдоэлемента, на котором выполняется анимация. Если анимация выполняется не на псевдоэлементе, а на элементе, возвращается пустая строка: ''.

Этот код получает элемент, для которого определена анимация, и добавляет обработчик события transitionend:

const transition = document.querySelector(".transition");

transition.addEventListener("transitionend", () => {
  console.log("Transition ended");
});

То же самое, но с использованием ontransitionend:

const transition = document.querySelector(".transition");

transition.ontransitionend = () => {
  console.log("Transition ended");
};

В следующем примере есть простой элемент <div> со стилями, включающими задержку анимации:

<div class="transition">Hover over me</div>
<div class="message"></div>

.transition {
  width: 100px;
  height: 100px;
  background: rgb(255 0 0 / 100%);
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: rgb(255 0 0 / 0%);
}

Добавим JavaScript для демонстрации срабатывания событий transitionstart, transitionrun, transitioncancel и transitionend. В этом примере, чтобы отменить анимацию, прекратите наведение курсора на элемент до завершения анимации. Для того, чтобы сработало событие окончания анимации, необходимо удерживать наведение курсора на элемент до конца анимации.

const message = document.querySelector(".message");
const el = document.querySelector(".transition");

el.addEventListener("transitionrun", () => {
  message.textContent = "transitionrun fired";
});

el.addEventListener("transitionstart", () => {
  message.textContent = "transitionstart fired";
});

el.addEventListener("transitioncancel", () => {
  message.textContent = "transitioncancel fired";
});

el.addEventListener("transitionend", () => {
  message.textContent = "transitionend fired";
});

Событие transitionend срабатывает в обоих направлениях: когда блок заканчивает изменение цвета и непрозрачность достигает 0 или 1, в зависимости от направления.

Если нет задержки или продолжительности анимации, если обе равны 0 или ни одно из них не задано, анимации нет, и никакие события анимации не генерируются.

Если сгенерировано событие transitioncancel , событие transitionend не будет сгенерировано.

• Интерфейс TransitionEvent
• Свойства CSS: transition, transition-delay, transition-duration, transition-property, transition-timing-function
• Связанные события: transitionrun, transitionstart, transitioncancel