Element: transitionrun-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

ontransitionrun = (event) => { }

Ereignistyp

Ein TransitionEvent. Erbt von Event.

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem übergeordneten Event.

TransitionEvent.propertyName Schreibgeschützt

Ein String, der den Namen der CSS-Eigenschaft enthält, die mit der Transition verbunden ist.

TransitionEvent.elapsedTime Schreibgeschützt

Ein float, der die Zeitspanne in Sekunden angibt, die die Transition beim Auslösen dieses Ereignisses läuft. Dieser Wert wird nicht von der Eigenschaft transition-delay beeinflusst.

TransitionEvent.pseudoElement Schreibgeschützt

Ein String, der mit :: beginnt und den Namen des Pseudo-Elements enthält, auf dem die Animation läuft. Wenn die Transition nicht auf einem Pseudo-Element, sondern auf dem Element läuft, ein leerer String: ''.

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, aber mit Verwendung der ontransitionrun-Eigenschaft anstelle von addEventListener():

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

Live-Beispiel

Im folgenden Beispiel haben wir ein einfaches <div>-Element, das mit einer Transition gestylt ist, 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 etwas JavaScript hinzu, um zu zeigen, 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 ist, dass:

• transitionrun ausgelöst wird, wenn die Transition erstellt wird (d.h. zu Beginn jeder Verzögerung).
• transitionstart ausgelöst wird, wenn die eigentliche Animation begonnen hat (d.h. am Ende der Verzögerung).

Das transitionrun-Ereignis wird auch dann ausgelöst, wenn die Transition abgebrochen wird, bevor die Verzögerung abläuft. Wenn keine Transition-Verzögerung vorhanden ist oder wenn die transition-delay negativ ist, werden sowohl transitionrun als auch transitionstart ausgelöst.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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