Element: transitionend Ereignis

Syntax

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

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

ontransitionend = (event) => { }

Ereignistyp

Ein TransitionEvent. Erbt von Event.

Beispiele

Dieser Code holt ein Element, das einen definierten Übergang hat, und fügt einen Listener für das transitionend Ereignis hinzu:

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

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

Dasselbe, aber mit ontransitionend:

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

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

Live-Beispiel

Im folgenden Beispiel haben wir ein einfaches <div>-Element, das mit einem Übergang, der eine Verzögerung beinhaltet, gestaltet 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 etwas JavaScript hinzu, um anzuzeigen, dass die transitionstart, transitionrun, transitioncancel und transitionend Ereignisse ausgelöst werden. In diesem Beispiel, um den Übergang abzubrechen, hören Sie auf, über dem Übergangselement zu schweben, bevor der Übergang endet. Damit das transitionend Ereignis ausgelöst wird, bleiben Sie über dem Übergang, bis der Übergang endet.

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 das Kästchen das Drehen beendet und die Deckkraft 0 oder 1 erreicht, abhängig von der Richtung.

Wenn es keine Übergangsverzögerung oder -dauer gibt, wenn beide auf 0s gesetzt sind oder keiner erklärt ist, gibt es keinen Übergang und keines der Übergangsereignisse wird ausgelöst.

Wenn das transitioncancel Ereignis ausgelöst wird, wird das transitionend Ereignis nicht ausgelöst.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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