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

Событие transitionrun срабатывает при первом создании CSS-перехода, т.е. до начала любого transition-delay.

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

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

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

ontransitionrun = (event) => {};

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

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

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

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

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

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

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

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

Этот код добавляет обработчик к событию transitionrun:

el.addEventListener("transitionrun", () => {
  console.log(
    "Transition is running but hasn't necessarily started transitioning yet",
  );
});

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

el.ontransitionrun = () => {
  console.log(
    "Transition started running, and will start transitioning when the transition delay has expired",
  );
};

В следующем примере у нас есть простой элемент <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.

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

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

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

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

Разница в том, что:

• transitionrun срабатывает при создании перехода (т.е. в начале любой задержки).
• transitionstart срабатывает, когда фактическая анимация началась (т.е. в конце любой задержки).

Событие transitionrun произойдет, даже если переход будет отменён до истечения задержки. Если нет задержки перехода или задержка перехода отрицательная, оба события transitionrun и transitionstart срабатывают.

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