Element: transitionrun-Ereignis

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandlereigenschaft.

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

ontransitionrun = (event) => { }

Ein TransitionEvent. Erbt von Event.

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, das die Zeit in Sekunden angibt, die die Transition beim Auslösen dieses Ereignisses bereits läuft. Dieser Wert wird nicht von der transition-delay-Eigenschaft 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, ist der String leer: ''.

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

Das Gleiche, aber unter Verwendung der ontransitionrun-Eigenschaft anstelle von addEventListener():

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

Im folgenden Beispiel haben wir ein einfaches <div>-Element, das mit einer Transition, die eine Verzögerung enthält, gestylt ist:

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

Dazu fügen wir etwas JavaScript hinzu, um anzuzeigen, wo die transitionstart- und transitionrun-Ereignisse 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 (d.h. zu Beginn einer Verzögerung).
• transitionstart wird ausgelöst, wenn die eigentliche Animation beginnt (d.h. am Ende einer Verzögerung).

Das transitionrun-Ereignis tritt auch dann auf, wenn die Transition vor dem Ablauf der Verzögerung abgebrochen wird. Wenn es keine Transition-Verzögerung gibt oder wenn die transition-delay negativ ist, werden sowohl transitionrun als auch transitionstart ausgelöst.

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