Element: transitionstart Ereignis

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

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

ontransitionstart = (event) => {};

Ein TransitionEvent. Erbt von Event.

Erbt auch Eigenschaften von seinem Elternteil Event.

TransitionEvent.propertyName Schreibgeschützt

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

TransitionEvent.elapsedTime Schreibgeschützt

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 Schreibgeschützt

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: ''.

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

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

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

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

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

<div class="transition">Hover over me</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: 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.

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).

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