view-transition-class

Baseline 2025

Newly available

Since ⁨October 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die view-transition-class CSS Eigenschaft bietet den ausgewählten Elementen eine identifizierende Klasse (ein <custom-ident>) und stellt eine zusätzliche Methode zur Verfügung, um die Ansichtsübergänge für diese Elemente zu gestalten.

Syntax

css

/* <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 einem separaten Ansichtsübergang vom Root-Ansichtsübergang teilnimmt. Der Bezeichner muss einzigartig sein. Wenn zwei gerenderte Elemente zur gleichen Zeit denselben view-transition-name haben, wird ViewTransition.ready abgelehnt und der Übergang wird übersprungen.
none: Es wird keine Klasse auf die benannten Ansichtübergangs-Pseudoelemente angewendet, die für dieses Element generiert werden.

Beschreibung

Der view-transition-class Wert bietet einen Stil-Ansatzpunkt, ähnlich wie ein CSS-Klassenname, der verwendet werden kann, um dieselben Stile auf mehrere Ansichtübergangs-Pseudoelemente anzuwenden. Es markiert ein Element nicht zur Erfassung. Jedes einzelne Element benötigt weiterhin seinen eigenen eindeutigen view-transition-name; die view-transition-class wird nur als zusätzliche Möglichkeit verwendet, um Elemente zu gestalten, die bereits einen view-transition-name haben. Die Unterstützung zur automatischen Bestimmung des view-transition-name wird in der CSS View Transitions Module Level 2 Spezifikation diskutiert.

Die view-transition-class wendet Stile mithilfe der Ansichtübergangs-Pseudoelemente an, einschließlich ::view-transition-group(), ::view-transition-image-pair(), ::view-transition-old(), und ::view-transition-new(). Dies ist anders als der view-transition-name, der Ansichtübergänge zwischen dem Element im alten Zustand und seinem entsprechenden Element im neuen Zustand verbindet.

Bis die view-transition-class Eigenschaft in allen Browsern, die Ansichtübergänge unterstützen, vollständig unterstützt wird, fügen Sie ein benutzerdefiniertes ::view-transition-group() für jedes Element hinzu.

Formale Definition

Anfangswert	`none`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formaler Syntax

view-transition-class = 
  none             |
  <custom-ident>+

Beispiele

css

::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

Specification
CSS View Transitions Module Level 2 # view-transition-class-prop

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden