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 Elternteil Event.

TransitionEvent.propertyName Schreibgeschützt

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

TransitionEvent.elapsedTime Schreibgeschützt

Ein float, der die Zeitmenge angibt, die der Übergang in Sekunden gelaufen ist, als dieses Ereignis ausgelöst wurde. 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 der Übergang nicht auf einem Pseudo-Element, sondern auf dem Element läuft, ein leerer String: ''.

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 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 einem Übergang gestylt ist, der eine Verzögerung beinhaltet:

<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 ist, dass:

• transitionrun wird ausgelöst, wenn der Übergang erstellt wird (d.h. zu Beginn einer Verzögerung).
• transitionstart wird ausgelöst, wenn die tatsächliche Animation begonnen hat (d.h. am Ende einer Verzögerung).

Das transitionrun wird auch ausgelöst, wenn der Übergang abgebrochen wird, bevor die Verzögerung abläuft. Wenn es keine Übergangsverzögerung gibt oder transition-delay negativ ist, werden sowohl transitionrun als auch transitionstart ausgelöst.

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