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, d.h. nach Ablauf einer transition-delay.
Dieses Ereignis ist nicht abbrechbar.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("transitionstart", (event) => { })
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");
});
Dasselbe, jedoch 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 inklusive einer Verzögerung 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 zu zeigen, wo die transitionstart- und transitionrun-Ereignisse auftreten.
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 ausgelöst wird, wenn die Transition erstellt wird (d.h. zu Beginn einer Verzögerung).
- transitionstart ausgelöst wird, wenn die eigentliche Animation begonnen hat (d.h. am Ende einer Verzögerung).
Spezifikationen
| Spezifikation |
|---|
| CSS Transitions Module Level 1 # transitionstart |
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