Element: transitionrun-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

ontransitionrun = (event) => { }

Ereignistyp

Ein TransitionEvent. Es erbt von Event.

Beispiele

Dieser Code fügt einen Listener für das transitionrun-Ereignis hinzu:

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

Dasselbe Beispiel verwendet die Eigenschaft ontransitionrun anstelle von addEventListener(). Beachten Sie jedoch, dass dadurch gegebenenfalls andere über ontransitionrun hinzugefügte Event-Listener ersetzt werden:

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

Interaktives Beispiel

Im folgenden Beispiel wird ein einfaches <div>-Element mit einer Transition gestaltet, die eine Verzögerung enthält:

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

.transition {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: transparent;
}

Dazu fügen wir JavaScript hinzu, um anzuzeigen, wann die Ereignisse transitionstart und transitionrun ausgelöst werden.

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

Der Unterschied besteht darin, dass:

• transitionrun ausgelöst wird, wenn die Transition erstellt wird (also zu Beginn einer etwaigen Verzögerung).
• transitionstart ausgelöst wird, wenn die eigentliche Animation beginnt (also am Ende einer etwaigen Verzögerung).

transitionrun wird auch dann ausgelöst, wenn die Transition vor Ablauf der Verzögerung abgebrochen wird. Wenn keine Verzögerung für die Transition festgelegt ist oder transition-delay negativ ist, werden sowohl transitionrun als auch transitionstart ausgelöst.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Schnittstelle TransitionEvent
• CSS-Eigenschaften: transition, transition-delay, transition-duration, transition-property, transition-timing-function
• Verwandte Ereignisse: transitionend, transitionstart, transitioncancel