Element: transitionend event

Syntax

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

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

ontransitionend = (event) => { }

Ereignistyp

Ein TransitionEvent. Erbt von Event.

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem Eltern-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 Länge der Zeit in Sekunden angibt, die die Transition lief, als dieses Ereignis ausgelöst wurde. Dieser Wert wird nicht von der transition-delay-Eigenschaft beeinflusst.

TransitionEvent.pseudoElement Schreibgeschützt

Ein String, der mit :: beginnt und den Namen des Pseudoelements 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 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");
};

Live-Beispiel

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

<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 werden wir etwas JavaScript hinzufügen, um anzuzeigen, dass die Ereignisse transitionstart, transitionrun, transitioncancel und transitionend 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";
});

Das transitionend-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 das transitioncancel-Ereignis ausgelöst wird, wird das transitionend-Ereignis nicht ausgelöst.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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