view-transition-name

Limited availability

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

Die view-transition-name CSS-Eigenschaft bietet dem ausgewählten Element einen unverwechselbaren Namen (ein <custom-ident>) und bewirkt, dass es an einem separaten Ansichtsübergang vom Wurzel-Ansichtsübergang teilnimmt — oder an keinem Ansichtsübergang, wenn der Wert none angegeben ist.

Syntax

css

/* <custom-ident> value examples */
view-transition-name: header;
view-transition-name: figure-caption;

/* Keyword value */
view-transition-name: none;

Werte

<custom-ident>: Ein identifizierender Name, der bewirkt, dass das ausgewählte Element an einem separaten Ansichtsübergang vom Wurzel-Ansichtsübergang teilnimmt. Der Identifikator muss eindeutig sein. Wenn zwei gerenderte Elemente zur gleichen Zeit denselben view-transition-name haben, wird ViewTransition.ready zurückgewiesen und der Übergang wird übersprungen.

Hinweis: Das <custom-ident> kann nicht auto sein.
none: Das ausgewählte Element wird nicht an einem Ansichtsübergang teilnehmen.

Formale Definition

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

Formale Syntax

view-transition-name = 
  none            |
  <custom-ident>

Beispiele

css

figcaption {
  view-transition-name: figure-caption;
}

Spezifikationen

Specification
CSS View Transitions Module Level 1 # view-transition-name-prop

Browser-Kompatibilität

BCD tables only load in the browser