Element: transitioncancel-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

ontransitioncancel = (event) => { }

Ereignistyp

Ein TransitionEvent. Erbt von Event.

Beispiele

Dieser Code ruft ein Element ab, für das eine Transition definiert ist, und fügt einen Listener für das transitioncancel-Ereignis hinzu:

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

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

Dasselbe mit der Eigenschaft ontransitioncancel anstelle von addEventListener() (beachten Sie jedoch, dass dadurch gegebenenfalls andere über ontransitioncancel hinzugefügte Event-Listener ersetzt werden):

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

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

Interaktives Beispiel

Im folgenden Beispiel verwenden wir ein einfaches <div>-Element, für das eine Transition mit einer Verzögerung definiert 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;
}

Wir fügen JavaScript hinzu, um anzuzeigen, dass die Ereignisse transitionstart, transitionrun, transitioncancel und transitionend ausgelöst werden. Um die Transition in diesem Beispiel abzubrechen, bewegen Sie den Mauszeiger vor ihrem Ende von der Box weg. Damit das transitionend-Ereignis ausgelöst wird, lassen Sie den Mauszeiger bis zum Ende der Transition über der Box.

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 einer der beiden Richtungen abgebrochen wird, nachdem das transitionrun-Ereignis aufgetreten ist und bevor das transitionend-Ereignis ausgelöst wird.

Wenn keine Verzögerung oder Dauer für die Transition festgelegt ist, beide Werte 0s betragen oder keiner der beiden Werte deklariert ist, findet keine Transition statt und keines 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

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