Element: transitioncancel Ereignis

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

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

ontransitioncancel = (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 dem Übergang verbunden ist.

TransitionEvent.elapsedTime Schreibgeschützt

Ein float, der die Zeitdauer in Sekunden angibt, wie lange der Übergang lief, als dieses Ereignis ausgelöst wurde. Dieser Wert wird nicht von der transition-delay Eigenschaft beeinflusst.

TransitionEvent.pseudoElement Schreibgeschützt

Ein String, der mit :: beginnt und den Namen des Pseudoelements enthält, auf dem die Animation läuft. Falls der Übergang nicht auf einem Pseudoelement läuft, sondern auf dem Element selbst, ist der String leer: ''.

Dieser Code holt sich ein Element, 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, der eine Verzögerung beinhaltet, gestylt ist:

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

Hierzu fügen wir etwas JavaScript hinzu, um anzuzeigen, dass die Ereignisse transitionstart, transitionrun, transitioncancel und transitionend ausgelöst werden. In diesem Beispiel brechen Sie den Übergang ab, indem Sie aufhören, über das Übergangselement zu schweben, bevor der Übergang endet. Damit das Übergangsende-Ereignis ausgelöst wird, bleiben Sie über dem Übergangselement, 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 irgendeine Richtung abgebrochen wird, nachdem das transitionrun Ereignis aufgetreten ist und bevor das transitionend Ereignis ausgelöst wird.

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