Element: transitioncancel event

Syntax

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

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

ontransitioncancel = (event) => { }

Ereignistyp

Ein TransitionEvent. Erbt von Event.

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem Elternteil Event.

TransitionEvent.propertyName Schreibgeschützt

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

TransitionEvent.elapsedTime Schreibgeschützt

Ein float, der die Zeit in Sekunden angibt, wie lange der Übergang zum Zeitpunkt des Auslösens dieses Ereignisses bereits läuft. Dieser Wert wird von der Eigenschaft transition-delay nicht 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 der Übergang nicht auf einem Pseudo-Element, sondern auf dem Element selbst erfolgt, ein leerer String: ''.

Beispiele

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");
};

Live-Beispiel

Im folgenden Beispiel haben wir ein einfaches <div> Element, das mit einem Übergang, der eine Verzögerung beinhaltet, 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 den Übergang abzubrechen, hören Sie auf, über der Transformationsbox zu schweben, bevor der Übergang endet. Damit das transitionend Ereignis ausgelöst wird, bleiben Sie so lange über dem Übergang, 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 beide Richtungen nach dem Auftreten des transitionrun Ereignisses und vor dem Auslösen des transitionend abgebrochen wird.

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

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