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

Событие transitionstart срабатывает, когда переход CSS-перехода фактически начался, т. е. после окончания любого transition-delay.

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

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

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

ontransitionstart = (event) => {};

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

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

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

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

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

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

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

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

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

element.addEventListener("transitionstart", () => {
  console.log("Started transitioning");
});

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

element.ontransitionstart = () => {
  console.log("Started transitioning");
};

В следующем примере есть простой элемент <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 transition = document.querySelector(".transition");
const message = document.querySelector(".message");

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

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

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

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

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

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