view-transition-class

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die view-transition-class CSS Eigenschaft bietet den ausgewählten Elementen eine identifizierende Klasse (ein <custom-ident>), die eine zusätzliche Methode zur Gestaltung der Ansichtsübergänge für diese Elemente bereitstellt.

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 das ausgewählte Element dazu bringt, an einem separaten Ansichtsübergang vom Hauptübergang teilzunehmen. Der Bezeichner muss eindeutig sein. Wenn zwei gerenderte Elemente gleichzeitig denselben view-transition-name haben, wird ViewTransition.ready abgelehnt und der Übergang wird übersprungen.
none: Keine Klasse wird auf die benannten Pseudo-Elemente des Ansichtsübergangs angewendet, die für dieses Element generiert werden.

Beschreibung

Der view-transition-class Wert bietet einen Styling-Hook, ähnlich einem CSS-Klassennamen, der verwendet werden kann, um dieselben Stile auf mehrere Ansichtsübergangs-Pseudo-Elemente anzuwenden. Er markiert kein Element zur Erfassung. Jedes einzelne Element benötigt immer noch seinen eigenen einzigartigen view-transition-name; die view-transition-class dient nur als zusätzliche Möglichkeit, 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 mit den Ansichtsübergangs-Pseudo-Elementen an, einschließlich ::view-transition-group(), ::view-transition-image-pair(), ::view-transition-old(), und ::view-transition-new(). Dies unterscheidet sich von der view-transition-name, die Ansichtsübergänge zwischen dem Element im alten Zustand und dem entsprechenden Element im neuen Zustand abgleicht.

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

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

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