view-transition-class CSS property
Baseline
2025
Neu verfügbar
Seit October 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die view-transition-class-Eigenschaft CSS versieht die ausgewählten Elemente mit einer identifizierenden Klasse (einem <custom-ident>) und bietet damit eine zusätzliche Methode zum Stylen der Ansichtstransitionen für diese Elemente.
Syntax
/* <custom-ident> value examples */
view-transition-class: card;
/* Keyword value */
view-transition-class: none;
/* Global values */
view-transition-class: inherit;
view-transition-class: initial;
view-transition-class: revert;
view-transition-class: revert-layer;
view-transition-class: unset;
Werte
<custom-ident>-
Ein identifizierender Name, der dazu führt, dass das ausgewählte Element an einer separaten Ansichtstransition von der Wurzelansichtstransition teilnimmt. Der Bezeichner muss eindeutig sein. Wenn zwei gerenderte Elemente zur gleichen Zeit denselben
view-transition-namehaben, wirdViewTransition.readyabgelehnt und die Transition wird übersprungen. none-
Es wird keine Klasse auf die benannten Ansichtstransition-Pseudo-Elemente angewendet, die für dieses Element erzeugt werden.
Beschreibung
Der view-transition-class-Wert bietet ein Styling-Element, ähnlich wie ein CSS-Klassenname, mit dem dieselben Stile auf mehrere Ansichtstransition-Pseudo-Elemente angewendet werden können. Es markiert kein Element zum Erfassen. Jedes einzelne Element benötigt weiterhin seinen eigenen eindeutigen view-transition-name; die view-transition-class wird nur als zusätzliche Möglichkeit genutzt, um Elemente zu stylen, die bereits einen view-transition-name haben. Die Unterstützung zur automatischen Bestimmung des view-transition-name wird in der Spezifikation CSS View Transitions Module Level 2 diskutiert.
Die view-transition-class wendet Stile mit den Ansichtstransition-Pseudo-Elementen an, einschließlich ::view-transition-group(), ::view-transition-image-pair(), ::view-transition-old(), und ::view-transition-new(). Dies unterscheidet sich von dem view-transition-name, der Ansichtstransitionen zwischen dem Element im alten Zustand und seinem entsprechenden Element im neuen Zustand abgleicht.
Bis die view-transition-class-Eigenschaft in allen Browsern, die Ansichtstransitionen unterstützen, vollständig unterstützt wird, sollte ein benutzerdefiniertes ::view-transition-group() für jedes Element enthalten werden.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
view-transition-class =
none |
<custom-ident>+
Beispiele
::view-transition-group(.fast-card-slide) {
animation-duration: 3s;
}
.product {
view-transition-class: fast-card-slide;
}
.product#card1 {
view-transition-name: show-card;
}
.product#card2 {
view-transition-name: hide-card;
}
Spezifikationen
| Spezifikation |
|---|
| CSS View Transitions Module Level 2 # view-transition-class-prop |