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

Событие transitioncancel срабатывает при отмене CSS-перехода.

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

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

ontransitioncancel = (event) => {};

Тип TransitionEvent. Наследуется от Event.

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

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

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

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

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

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

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

Этот код получает элемент, для которого определён переход, и добавляет слушатель события transitioncancel:

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

transition.addEventListener("transitioncancel", () => {
  console.log("Transition canceled");
});

То же самое, но с использованием свойства ontransitioncancel вместо addEventListener():

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

transition.ontransitioncancel = () => {
  console.log("Transition canceled");
};

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

<div class="transition"></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: 2s;
}

.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";
});

Событие transitioncancel срабатывает, если переход отменяется в любом направлении после срабатывания события transitionrun и перед срабатыванием transitionend.

Если нет задержки или длительности перехода, если оба значения равны 0 или ни одно из них не объявлено, перехода нет, и ни одно из событий перехода не срабатывает.

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

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