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…