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 Zeit in Sekunden angibt, wie lange die Transition bereits läuft, wenn dieses Ereignis ausgelöst wird. Dieser Wert wird nicht von der transition-delay-Eigenschaft beeinflusst.

TransitionEvent.pseudoElement Schreibgeschützt

Ein String, der mit :: beginnt und 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 selbst läuft, ist der String leer: ''.

Dieser Code ruft ein Element ab, 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 unter Verwendung von 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 gestylt ist, die 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 JavaScript hinzu, um anzuzeigen, dass die Ereignisse transitionstart, transitionrun, transitioncancel und transitionend ausgelöst werden. In diesem Beispiel, um die Transition zu beenden, hören Sie auf, über das übergangene Feld zu schweben, bevor die Transition endet. Damit das transitionend-Ereignis 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 die Box aufhört sich zu drehen und die Deckkraft 0 oder 1 erreicht, je nach Richtung.

Wenn es keine Verzögerung oder Dauer für die Transition gibt, wenn beide 0s sind oder keiner deklariert ist, gibt es keine Transition und keines der Transition-Ereignisse wird ausgelöst.

Falls 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