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 übergeordneten 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 Laufzeit der Transition in Sekunden angibt, wenn dieses Ereignis ausgelöst wurde. Dieser Wert wird nicht durch die transition-delay-Eigenschaft beeinflusst.

TransitionEvent.pseudoElement Schreibgeschützt

Ein String, beginnend mit ::, der den Namen des Pseudo-Elements enthält, auf dem die Animation läuft. Wenn die Transition nicht auf einem Pseudo-Element, sondern auf dem Element läuft, ein leerer String: ''.

Dieser Code greift auf ein Element zu, das eine definierte Transition 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");
};

Im folgenden Beispiel haben wir ein einfaches <div>-Element, das mit einer Transition inklusive einer Verzögerung 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 Ereignisse transitionstart, transitionrun, transitioncancel und transitionend ausgelöst werden. In diesem Beispiel, um die Transition abzubrechen, stoppen Sie das Überfahren des Übergangsfelds, bevor die Transition endet. Damit das Übergangsende-Ereignis ausgelöst wird, bleiben Sie so lange über dem Übergang bis er 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 sich die Box dreht und die Deckkraft 0 oder 1 erreicht, abhängig von der Richtung.

Wenn es keine Übergangsverzögerung oder -dauer gibt, wenn beide 0s sind oder weder erklärt wird, 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