view-transition-class

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

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 bewirkt, dass das ausgewählte Element an einem separaten View-Übergang vom Root-View-Übergang teilnimmt. Der Bezeichner muss eindeutig sein. Wenn zwei gerenderte Elemente zur gleichen Zeit denselben view-transition-name haben, wird ViewTransition.ready ablehnen und der Übergang wird übersprungen.

none

Keine Klasse würde auf die für dieses Element generierten benannten View-Übergangs-Pseudo-Elemente angewendet.

Beschreibung

Der view-transition-class-Wert bietet einen Styling-Hook, ähnlich einem CSS-Klassennamen, der verwendet werden kann, um dieselben Stile auf mehrere View-Übergangs-Pseudo-Elemente anzuwenden. Es markiert kein Element zur Erfassung. Jedes einzelne Element benötigt immer noch seinen eigenen einzigartigen view-transition-name; die view-transition-class wird nur als zusätzliche Möglichkeit verwendet, um Elemente zu stylen, 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 View-Übergangs-Pseudo-Elemente 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 Übergänge zwischen dem Element im alten Zustand und seinem entsprechenden Element im neuen Zustand abgleicht.

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

Formale Definition

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

Browser-Kompatibilität

Siehe auch

• view-transition-name
• Verwendung der View Transition API Leitfaden
• View Transition API
• Sanfte Übergänge mit der View Transition API