Element: transitionstart event

Syntax

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

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

ontransitionstart = (event) => { }

Ereignistyp

Ein TransitionEvent. Erbt von Event.

Ereigniseigenschaften

Erbt auch Eigenschaften vom übergeordneten Event.

TransitionEvent.propertyName Schreibgeschützt

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

TransitionEvent.elapsedTime Schreibgeschützt

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

TransitionEvent.pseudoElement Schreibgeschützt

Ein String, der mit :: beginnt und den Namen des Pseudo-Elements enthält, auf dem die Animation ausgeführt wird. Wenn die Transition nicht auf einem Pseudo-Element, sondern auf dem Element selbst ausgeführt wird, ist der String leer: ''.

Beispiele

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

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

Dasselbe, jedoch wird die ontransitionstart-Eigenschaft anstelle von addEventListener() verwendet:

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

Live-Beispiel

Im folgenden Beispiel haben wir ein einfaches <div>-Element, das mit einer Transition, die eine Verzögerung enthält, gestylt ist:

<div class="transition">Hover over me</div>
<div class="message"></div>

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

.transition:hover {
  transform: rotate(90deg);
  background: transparent;
}

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

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 ist:

• transitionrun wird ausgelöst, wenn die Transition erstellt wird (d.h. zu Beginn jeder Verzögerung).
• transitionstart wird ausgelöst, wenn die eigentliche Animation begonnen hat (d.h. am Ende jeder Verzögerung).

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die TransitionEvent-Schnittstelle
• CSS-Eigenschaften: transition, transition-delay, transition-duration, transition-property, transition-timing-function
• Verwandte Ereignisse: transitionend, transitionrun, transitioncancel