Element: transitionend-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie einen Wert der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

ontransitionend = (event) => { }

Ereignistyp

Ein TransitionEvent. Erbt von Event.

Beispiele

Dieser Code ruft ein Element ab, für das eine Transition definiert ist, und fügt einen Listener für das transitionend-Ereignis hinzu:

const transition = document.querySelector(".transition");

transition.addEventListener("transitionend", () => {
  console.log("Transition ended");
});

Dasselbe mit ontransitionend (beachten Sie jedoch, dass dadurch gegebenenfalls andere über ontransitionend hinzugefügte Event-Listener ersetzt werden):

const transition = document.querySelector(".transition");

transition.ontransitionend = () => {
  console.log("Transition ended");
};

Interaktives Beispiel

Im folgenden Beispiel verwenden wir ein einfaches <div>-Element, für das eine Transition mit Verzögerung definiert ist:

<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 JavaScript hinzu, das anzeigt, wann die Ereignisse transitionstart, transitionrun, transitioncancel und transitionend ausgelöst werden. Um die Transition in diesem Beispiel abzubrechen, bewegen Sie den Mauszeiger von der Box weg, bevor die Transition endet. Damit das Ereignis transitionend ausgelöst wird, lassen Sie den Mauszeiger bis zum Ende der Transition über der Box.

const message = document.querySelector(".message");
const el = document.querySelector(".transition");

el.addEventListener("transitionrun", () => {
  message.textContent = "transitionrun fired";
});

el.addEventListener("transitionstart", () => {
  message.textContent = "transitionstart fired";
});

el.addEventListener("transitioncancel", () => {
  message.textContent = "transitioncancel fired";
});

el.addEventListener("transitionend", () => {
  message.textContent = "transitionend fired";
});

Das transitionend-Ereignis wird in beide Richtungen ausgelöst: wenn die Drehung der Box abgeschlossen ist und die Deckkraft je nach Richtung den Wert 0 oder 1 erreicht.

Wenn weder eine Verzögerung noch eine Dauer für die Transition festgelegt ist oder beide 0s betragen, findet keine Transition statt und keines der Transition-Ereignisse wird ausgelöst.

Wird das transitioncancel-Ereignis ausgelöst, wird das transitionend-Ereignis nicht ausgelöst.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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