Element: transitionstart-Ereignis

Das transitionstart-Ereignis wird ausgelöst, wenn ein CSS-Übergang tatsächlich beginnt, d.h. nach dem Ende eines beliebigen transition-delay.

Dieses Ereignis ist nicht abbrechbar.

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 von seinem übergeordneten Event.

TransitionEvent.propertyName Schreibgeschützt

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

TransitionEvent.elapsedTime Schreibgeschützt

Ein float, der die Zeitdauer in Sekunden angibt, wie lange der Übergang 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 Pseudoelements enthält, auf dem die Animation ausgeführt wird. Wenn der Übergang nicht auf einem Pseudoelement, sondern auf dem Element läuft, ein leerer String: ''.

Beispiele

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

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

Dasselbe, aber mit der Eigenschaft ontransitionstart anstelle von addEventListener():

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

Live-Beispiel

Im folgenden Beispiel haben wir ein einfaches <div>-Element, das mit einem Übergang, der eine Verzögerung einschließt, 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 der Übergang erstellt wird (d.h. zu Beginn einer Verzögerung).
• transitionstart wird ausgelöst, wenn die eigentliche Animation begonnen hat (d.h. am Ende einer 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