Dastransitionend-Ereignis wird ausgelöst, wenn eineCSS-Transition abgeschlossen ist. Falls eine Transition vor Abschluss entfernt wird, zum Beispiel wenn dietransition-property entfernt wird oderdisplay aufnone gesetzt wird, wird das Ereignis nicht ausgelöst.

Dastransitionend-Ereignis wird in beide Richtungen ausgelöst – sowohl wenn es in den Übergangszustand wechselt, als auch wenn es vollständig auf den Standard- oder Nicht-Übergangszustand zurückkehrt. Gibt es keine Transition-Verzögerung oder -Dauer, also wenn beide 0 Sekunden sind oder keiner von beiden deklariert wurde, findet keine Transition statt, und keiner der Transition-Ereignisse wird ausgelöst. Wenn dastransitioncancel-Ereignis ausgelöst wird, wird dastransitionend-Ereignis nicht ausgelöst.

Dieses Ereignis kann nicht abgebrochen werden.

Syntax

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

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

Ereignistyp

EinTransitionEvent. Erbt vonEvent.

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem Eltern-Event.

TransitionEvent.propertyNameSchreibgeschützt

Ein String, der den Namen der CSS-Eigenschaft enthält, die mit der Transition verbunden ist.

TransitionEvent.elapsedTimeSchreibgeschützt

Einfloat, der die Länge der Zeit in Sekunden angibt, die die Transition lief, als dieses Ereignis ausgelöst wurde. Dieser Wert wird nicht von dertransition-delay-Eigenschaft beeinflusst.

TransitionEvent.pseudoElementSchreibgeschützt

Ein String, der mit:: beginnt und den Namen desPseudoelements enthält, auf dem die Animation läuft. Wenn die Transition nicht auf einem Pseudoelement, sondern auf dem Element läuft, ein leerer String:''.

Beispiele

Dieser Code ermittelt ein Element, das eine definierte Transition hat, und fügt einen Listener für dastransitionend-Ereignis hinzu:

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

Das Gleiche, aber mitontransitionend:

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

Live-Beispiel

Im folgenden Beispiel haben wir ein einfaches<div>-Element, das mit einer Transition gestylt ist, die eine Verzögerung beinhaltet:

<div>Hover over me</div><div></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 werden wir etwas JavaScript hinzufügen, um anzuzeigen, dass die Ereignissetransitionstart,transitionrun,transitioncancel undtransitionend ausgelöst werden. In diesem Beispiel, um die Transition abzubrechen, hören Sie auf, über das Element zu schweben, das sich in der Transition befindet, bevor die Transition endet. Damit das Transition-Endereignis ausgelöst wird, bleiben Sie über der Transition, bis die Transition 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";});

Dastransitionend-Ereignis wird in beide Richtungen ausgelöst: wenn das Element seine Drehung beendet und die Deckkraft 0 oder 1 erreicht, abhängig von der Richtung.

Gibt es keine Transition-Verzögerung oder -Dauer, also wenn beide 0 Sekunden sind oder keiner von beiden deklariert wurde, findet keine Transition statt, und keiner der Transition-Ereignisse wird ausgelöst.

Wenn dastransitioncancel-Ereignis ausgelöst wird, wird dastransitionend-Ereignis nicht ausgelöst.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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