Element: transitionstart-Ereignis

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

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

ontransitionstart = (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 der Transition verbunden ist.

TransitionEvent.elapsedTime Schreibgeschützt

Ein float, der die Zeit in Sekunden angibt, wie lange die Transition beim Auslösen dieses Ereignisses bereits gelaufen ist. 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 ausgeführt wird. Wenn die Transition nicht auf einem Pseudo-Element, sondern auf dem Element selbst ausgeführt wird, ein leerer String: ''.

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

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

Das gleiche, aber mit der Eigenschaft ontransitionstart anstelle von addEventListener():

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

Im folgenden Beispiel haben wir ein einfaches <div>-Element, das mit einer Transition gestylt ist, die 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%);
}

Wir fügen diesem einige JavaScript hinzu, um anzuzeigen, wo die transitionstart- und transitionrun-Ereignisse ausgelöst werden.

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

Der Unterschied ist:

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

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