view-transition-class

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

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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