Element: transitioncancel Ereignis

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

addEventListener("transitioncancel", (event) => {});

ontransitioncancel = (event) => {};

Ein TransitionEvent. Erbt von Event.

Erbt auch Eigenschaften von seinem übergeordneten Event.

TransitionEvent.propertyName Nur lesbar

Ein String, der den CSS-Property-Namen enthält, der mit dem Übergang verbunden ist.

TransitionEvent.elapsedTime Nur lesbar

Ein float, der die Zeit in Sekunden angibt, seit der der Übergang läuft, wenn dieses Ereignis ausgelöst wird. Dieser Wert wird nicht von der transition-delay Eigenschaft beeinflusst.

TransitionEvent.pseudoElement Nur lesbar

Ein String, der mit :: beginnt und 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, ein leerer String: ''.

Dieser Code ruft ein Element ab, das einen definierten Übergang hat, und fügt einen Listener für das transitioncancel Ereignis hinzu:

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

transition.addEventListener("transitioncancel", () => {
  console.log("Transition canceled");
});

Dasselbe, aber unter Verwendung der ontransitioncancel Eigenschaft anstelle von addEventListener():

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

transition.ontransitioncancel = () => {
  console.log("Transition canceled");
};

Im folgenden Beispiel haben wir ein einfaches <div>-Element, das mit einem Übergang gestylt ist, der eine Verzögerung beinhaltet:

<div class="transition"></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: 2s;
}

.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 Übergangsfeld zu schweben, bevor der Übergang endet. Damit das Übergangsende-Ereignis ausgelöst wird, bleiben Sie während des Übergangs über dem Element, bis der Übergang 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 transitioncancel Ereignis wird ausgelöst, wenn der Übergang in irgendeiner Richtung nach dem Auftreten des transitionrun Ereignisses und bevor das transitionend ausgelöst wird, abgebrochen wird.

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

• Die TransitionEvent Schnittstelle
• CSS-Eigenschaften: transition, transition-delay, transition-duration, transition-property, transition-timing-function
• Verwandte Ereignisse: transitionrun, transitionstart, transitionend