Element: transitionrun 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 transitionrun-Ereignis wird ausgelöst, wenn eine CSS-Übergang erstmals erstellt wird, d.h. bevor eine beliebige transition-delay begonnen hat.
Dieses Ereignis kann nicht abgebrochen werden.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.
addEventListener("transitionrun", (event) => { })
ontransitionrun = (event) => { }
Ereignistyp
Ein TransitionEvent. Erbt von Event.
Beispiele
Dieser Code fügt einen Listener für das transitionrun-Ereignis hinzu:
el.addEventListener("transitionrun", () => {
console.log(
"Transition is running but hasn't necessarily started transitioning yet",
);
});
Dasselbe, aber unter Verwendung der ontransitionrun-Eigenschaft anstelle von addEventListener():
el.ontransitionrun = () => {
console.log(
"Transition started running, and will start transitioning when the transition delay has expired",
);
};
Live-Beispiel
Im folgenden Beispiel haben wir ein einfaches <div>-Element, das mit einem Übergang, der eine Verzögerung enthält, 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 auftreten.
const el = document.querySelector(".transition");
const message = document.querySelector(".message");
el.addEventListener("transitionrun", () => {
message.textContent = "transitionrun fired";
});
el.addEventListener("transitionstart", () => {
message.textContent = "transitionstart fired";
});
el.addEventListener("transitionend", () => {
message.textContent = "transitionend fired";
});
Der Unterschied besteht darin, dass:
transitionrunwird ausgelöst, wenn der Übergang erstellt wird (d.h. zu Beginn einer beliebigen Verzögerung).transitionstartwird ausgelöst, wenn die eigentliche Animation begonnen hat (d.h. am Ende einer beliebigen Verzögerung).
Das transitionrun-Ereignis tritt auch auf, wenn der Übergang vor Ablauf der Verzögerung abgebrochen wird. Wenn keine Übergangsverzögerung vorhanden ist oder wenn transition-delay negativ ist, werden sowohl transitionrun als auch transitionstart ausgelöst.
Spezifikationen
| Spezifikation |
|---|
| CSS Transitions Module Level 1 # transitionrun |
Browser-Kompatibilität
Siehe auch
- Das Interface
TransitionEvent - CSS-Eigenschaften:
transition,transition-delay,transition-duration,transition-property,transition-timing-function - Verwandte Ereignisse:
transitionend,transitionstart,transitioncancel