Element: transitionstart Ereignis
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Das transitionstart
Ereignis wird ausgelöst, wenn eine CSS-Transition tatsächlich gestartet ist, d.h. nach dem Ende einer beliebigen transition-delay
.
Dieses Ereignis kann nicht abgebrochen werden.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder legen Sie eine Ereignishandler-Eigenschaft fest.
addEventListener("transitionstart", (event) => {});
ontransitionstart = (event) => {};
Ereignistyp
Ein TransitionEvent
. Erbt von Event
.
Ereigniseigenschaften
Erbt auch Eigenschaften von seinem Elternteil Event
.
TransitionEvent.propertyName
Nur lesbar-
Ein String, der den Namen der CSS-Eigenschaft enthält, die mit der Transition verbunden ist.
TransitionEvent.elapsedTime
Nur lesbar-
Ein
float
, der die Laufzeit der Transition in Sekunden angibt, wenn dieses Ereignis ausgelöst wird. Dieser Wert wird nicht von dertransition-delay
Eigenschaft beeinflusst. TransitionEvent.pseudoElement
Nur lesbar-
Ein String, beginnend mit
::
, der den Namen des Pseudo-Elements enthält, auf dem die Animation läuft. Wenn die Transition nicht auf einem Pseudo-Element, 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 die ontransitionstart
Eigenschaft anstelle von addEventListener()
verwenden:
element.ontransitionstart = () => {
console.log("Started transitioning");
};
Live-Beispiel
Im folgenden Beispiel haben wir ein einfaches <div>
-Element, das mit einer Transition inklusive Verzögerung gestylt ist:
<div class="transition">Hover over me</div>
<div class="message"></div>
.transition {
width: 100px;
height: 100px;
background: rgb(255 0 0 / 100%);
transition-property: transform, background;
transition-duration: 2s;
transition-delay: 1s;
}
.transition:hover {
transform: rotate(90deg);
background: rgb(255 0 0 / 0%);
}
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 besteht darin, dass:
- transitionrun ausgelöst wird, wenn die Transition erstellt wird (d.h. zu Beginn einer beliebigen Verzögerung).
- transitionstart ausgelöst wird, wenn die tatsächliche Animation begonnen hat (d.h. am Ende einer beliebigen Verzögerung).
Spezifikationen
Specification |
---|
CSS Transitions # transitionstart |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Das
TransitionEvent
Interface - CSS-Eigenschaften:
transition
,transition-delay
,transition-duration
,transition-property
,transition-timing-function
- Verwandte Ereignisse:
transitionend
,transitionrun
,transitioncancel