CSSTransition: transitionProperty-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2020.
Die transitionProperty-Eigenschaft des
CSSTransition-Interfaces liefert den erweiterten Übergangseigenschaftsnamen der Transition zurück. Dies ist die ausgeschriebene CSS-Eigenschaft, für die die Transition generiert wurde.
Wert
Ein String.
Beispiele
Rückgabe der transitionProperty
Die Transition im folgenden Beispiel ändert die Breite des Kastens beim Hover-Effekt. Der Aufruf von
Element.getAnimations() gibt ein Array aller Animation-
Objekte zurück. In unserem Fall wird ein CSSTransition-Objekt zurückgegeben, das die
erzeugte Animation darstellt. Die transitionProperty-Eigenschaft gibt die Eigenschaft
zurück, für die die Transition erstellt wurde, in diesem Fall width.
.box {
background-color: #165baa;
color: white;
width: 100px;
height: 100px;
transition: width 4s;
}
.box:hover {
width: 200px;
}
const item = document.querySelector(".box");
item.addEventListener("transitionrun", () => {
let animations = document.querySelector(".box").getAnimations();
console.log(animations[0].propertyName);
});
Spezifikationen
| Specification |
|---|
| CSS Transitions Level 2 # dom-csstransition-transitionproperty |
Browser-Kompatibilität
Loading…