Element: transitionstart Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Das transitionstart Ereignis wird ausgelöst, wenn eine CSS-Transition tatsächlich gestartet ist, d.h. nach dem Ende einer beliebigen transition-delay.

Dieses Ereignis kann nicht abgebrochen werden.

Syntax

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

js
addEventListener("transitionstart", (event) => {});

ontransitionstart = (event) => {};

Ereignistyp

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem Elternteil Event.

TransitionEvent.propertyName Nur lesbar

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

TransitionEvent.elapsedTime Nur lesbar

Ein float, der die Laufzeit der Transition in Sekunden angibt, wenn dieses Ereignis ausgelöst wird. Dieser Wert wird nicht von der transition-delay Eigenschaft beeinflusst.

TransitionEvent.pseudoElement Nur lesbar

Ein String, beginnend mit ::, der den Namen des Pseudo-Elements enthält, auf dem die Animation läuft. Wenn die Transition nicht auf einem Pseudo-Element, sondern auf dem Element läuft, ein leerer String: ''.

Beispiele

Dieser Code fügt einen Listener für das transitionstart Ereignis hinzu:

js
element.addEventListener("transitionstart", () => {
  console.log("Started transitioning");
});

Dasselbe, aber die ontransitionstart Eigenschaft anstelle von addEventListener() verwenden:

js
element.ontransitionstart = () => {
  console.log("Started transitioning");
};

Live-Beispiel

Im folgenden Beispiel haben wir ein einfaches <div>-Element, das mit einer Transition inklusive Verzögerung gestylt ist:

html
<div class="transition">Hover over me</div>
<div class="message"></div>
css
.transition {
  width: 100px;
  height: 100px;
  background: rgb(255 0 0 / 100%);
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: rgb(255 0 0 / 0%);
}

Dazu fügen wir etwas JavaScript hinzu, um anzuzeigen, wo die transitionstart- und transitionrun Ereignisse ausgelöst werden.

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

transition.addEventListener("transitionrun", () => {
  message.textContent = "transitionrun fired";
});

transition.addEventListener("transitionstart", () => {
  message.textContent = "transitionstart fired";
});

transition.addEventListener("transitionend", () => {
  message.textContent = "transitionend fired";
});

Der Unterschied besteht darin, dass:

  • transitionrun ausgelöst wird, wenn die Transition erstellt wird (d.h. zu Beginn einer beliebigen Verzögerung).
  • transitionstart ausgelöst wird, wenn die tatsächliche Animation begonnen hat (d.h. am Ende einer beliebigen Verzögerung).

Spezifikationen

Specification
CSS Transitions
# transitionstart

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch