Element: transitioncancel-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder legen Sie eine Ereignishandlereigenschaft fest.

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

ontransitioncancel = (event) => { }

Ereignistyp

Ein TransitionEvent. Erbt von Event.

Beispiele

Dieser Code erhält ein Element, das eine definierte Transition 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");
};

Live-Beispiel

Im folgenden Beispiel haben wir ein einfaches <div>-Element, das mit einer Transition mit verzögerter Startzeit gestylt ist:

<div class="transition"></div>
<div class="message"></div>

.transition {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 2s;
}

.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, hören Sie auf, über das transformierende Kästchen zu fahren, bevor die Transition endet. Damit das transitionend-Ereignis ausgelöst wird, bleiben Sie über der Transition, bis diese 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 die Transition in beide Richtungen nach Auftreten des transitionrun-Ereignisses und vor dem Auslösen des transitionend-Ereignisses abgebrochen wird.

Falls es keine Übergangsverzögerung oder -dauer gibt, wenn beide 0s betragen oder keines 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.

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, transitionend