Element: transitionstart Ereignis

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandlereigenschaft.

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

Ereignistyp

Ein TransitionEvent. Erbt von Event.

Ereigniseigenschaften

Erbt auch Eigenschaften von seinem Elternelement 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 Zeitdauer, die die Transition beim Auslösen des Ereignisses bereits läuft, in Sekunden angibt. Dieser Wert wird nicht von der Eigenschaft transition-delay beeinflusst.

TransitionEvent.pseudoElement Schreibgeschützt

Ein String, beginnend mit ::, der den Namen des Pseudoelements enthält, auf dem die Animation läuft. Wenn die Transition nicht auf einem Pseudoelement, sondern auf dem Element selbst läuft, ist der String leer: ''.

Beispiele

Dieser Code fügt einen Listener zum transitionstart Ereignis hinzu:

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

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

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

Live-Beispiel

Im folgenden Beispiel haben wir ein einfaches <div> Element, das mit einer Transition einschließlich einer Verzögerung gestaltet 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 werden wir etwas JavaScript hinzufügen, um zu zeigen, 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, dass:

• transitionrun wird ausgelöst, wenn die Transition erstellt wird (d.h. zu Beginn einer eventuell vorhandenen 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

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