Element: transitionend-Ereignis

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

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

ontransitionend = (event) => { }

Ein TransitionEvent. Erbt von Event.

Erbt auch Eigenschaften von seinem Eltern-Event](/de/docs/Web/API/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 Zeitdauer angibt, wie lange der Übergang beim Auslösen dieses Ereignisses bereits läuft, in Sekunden. Dieser Wert wird nicht von der transition-delay-Eigenschaft 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, ist der String leer: ''.

Dieser Code holt sich 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");
});

Das gleiche, aber mit ontransitionend:

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

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

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, dass die Ereignisse transitionstart, transitionrun, transitioncancel und transitionend ausgelöst werden. In diesem Beispiel, um den Übergang abzubrechen, hören Sie auf, über das übergehende Feld zu schweben, bevor der Übergang endet. Damit das Übergangsende-Ereignis ausgelöst wird, bleiben Sie über den Übergang bis zum Ende schweben.

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, je nach Richtung.

Wenn es keine Übergangsverzögerung oder -dauer gibt, wenn beide 0s sind oder keines deklariert 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.

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