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 dem Übergang verbunden ist.

TransitionEvent.elapsedTime Schreibgeschützt

Ein float, der die Zeit angibt, wie lange der Übergang in Sekunden gelaufen ist, als dieses Ereignis ausgelöst wurde. Dieser Wert wird von der transition-delay-Eigenschaft nicht beeinflusst.

TransitionEvent.pseudoElement Schreibgeschützt

Ein String, beginnend mit ::, der den Namen des Pseudoelements enthält, auf dem die Animation läuft. Wenn der Übergang nicht auf einem Pseudoelement, sondern auf dem Element läuft, ein leerer String: ''.

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

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

Dasselbe, jedoch unter Verwendung der ontransitionstart-Eigenschaft anstelle von addEventListener():

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

Im folgenden Beispiel haben wir ein einfaches <div>-Element, das mit einem Übergang inklusive einer Verzögerung gestaltet 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 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 besteht darin, dass:

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

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