Element: transitionstart-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2020 browserübergreifend verfügbar.
Das transitionstart-Ereignis wird ausgelöst, wenn eine CSS-Transition tatsächlich begonnen hat, also nachdem eine etwaige transition-delay abgelaufen ist.
Dieses Ereignis kann nicht abgebrochen werden.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("transitionstart", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
ontransitionstart = (event) => { }
Ereignistyp
Ein TransitionEvent. Erbt von Event.
Beispiele
Dieser Code fügt einen Listener für das transitionstart-Ereignis hinzu:
element.addEventListener("transitionstart", () => {
console.log("Started transitioning");
});
Das Gleiche, jedoch mit der Eigenschaft ontransitionstart statt addEventListener() (beachten Sie, dass dadurch gegebenenfalls andere über ontransitionstart hinzugefügte Event-Listener ersetzt werden):
element.ontransitionstart = () => {
console.log("Started transitioning");
};
Interaktives Beispiel
Im folgenden Beispiel haben wir ein einfaches <div>-Element, das mit einer Transition gestaltet ist, die eine Verzögerung enthält:
<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, wann die Ereignisse transitionstart und transitionrun 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:
transitionrunwird ausgelöst, wenn die Transition erstellt wird (also zu Beginn einer etwaigen Verzögerung).transitionstartwird ausgelöst, wenn die eigentliche Animation begonnen hat (also am Ende einer etwaigen Verzögerung).
Spezifikationen
| Spezifikation |
|---|
| CSS Transitions Module Level 1 # transitionstart |
Browser-Kompatibilität
Siehe auch
- Die Schnittstelle
TransitionEvent - CSS-Eigenschaften:
transition,transition-delay,transition-duration,transition-property,transition-timing-function - Verwandte Ereignisse:
transitionend,transitionrun,transitioncancel