::view-transition-group

Das Pseudoelement ::view-transition-group wählt einen oder mehrere Container aus, die die Teile eines einzelnen Ansichtsübergangs gruppieren.

::view-transition-group(transition-name) {
  animation-timing-function: ease-in-out;
}

Sehen Sie den Bezeichner transition-name im Argument des Pseudoelements? So können wir eine bestimmte View Transition auswählen. View Transitions werden in einem einzigen Pseudoelement ::view-transition gruppiert, wobei jede Transition in einer ::view-transition-group enthalten ist.

::view-transition
├─ ::view-transition-group(name-1)
├─ ::view-transition-group(name-2)
│ /* and so one... */

Und innerhalb jeder ::view-transition-group befindet sich ein weiteres Pseudoelement, das die „Vorher-Nachher“-Schnappschüsse enthält, zwischen denen die View Transitions stattfinden.

::view-transition
├─ ::view-transition-group(name-1)
│  └─ ::view-transition-image-pair(name-1)
│     ├─ ::view-transition-old(name-1)
│     └─ ::view-transition-new(name-1)
├─ ::view-transition-group(name-2)
│  └─ ::view-transition-image-pair(name-2)
│     ├─ ::view-transition-old(name-2)
│     └─ ::view-transition-new(name-2)
│ /* and so one... */

Das macht ::view-transition-group im Wesentlichen zum „Wurzelelement“ einer einzelnen View Transition. Es ist ein Wrapper zur Auswahl von ::view-transition-image-pair, typischerweise zur Positionierung dieser View Transition oder zur Definition ihrer Animations-Eigenschaften. Tatsächlich bezeichnet die Spezifikation sie als „View Transition Named Subtree Root“.

Syntax

::view-transition-group(<pt-name-selector>) {
  /* Styles */
}

Das Pseudoelement akzeptiert im Argument einen <pt-name-selector>, der einem der folgenden Werte entspricht

• <custom-ident>: Verwenden Sie dies, um eine bestimmte Transition-Gruppe im ::view-transition Pseudobaum auszuwählen. Wenn ein bestimmtes Element beispielsweise einen view-transition-name von gallery hat, würden Sie ::view-transition-group(gallery) verwenden, um diese Transition-Gruppe auszuwählen.
• root: Dieser Wert passt zu html::view-transition-group(*), einem vom Browser eingerichteten Selektor (siehe „Standardstyling“ unten), der auf alle View Transitions passt, die nicht über die CSS-Eigenschaft view-transition-name einer bestimmten View Transition-Gruppe zugewiesen sind.
• Universeller Selektor (*): Verwenden Sie dies, um alle View Transition-Gruppen auf einer Seite auszuwählen.

Standardstyling

Wie viele semantische HTML-Elemente und Pseudoelemente wenden Browser eine Reihe von Standardstilen auf ::view-transition-group an.

html::view-transition-group(*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}

Wenn wir also das Animationsverhalten der Transition positionieren und konfigurieren möchten, sind dies die Stile, die wir in unserem eigenen Stylesheet überschreiben müssen.

Barrierefreiheit (Accessibility)

Es ist immer eine gute Idee, Benutzer mit Bewegungsempfindlichkeiten zu berücksichtigen, wenn wir mit Animationen und Übergängen arbeiten. Wir können ::view-transition-group verwenden, um die Bewegung mithilfe der Media Query prefers-reduced-motion zu reduzieren.

Gemäß den oben genannten Standardstilen wendet der Browser eine animation-duration von 0.25s an. Wir können dies überschreiben, indem wir alle View Transition-Gruppen auf der Seite auswählen, indem wir den universellen Selektor im Argument des Pseudoelements übergeben und diese Dauer entweder entfernen oder reduzieren, um Bewegungsempfindlichkeiten zu berücksichtigen.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*): {
    animation-duration: 0;
  }
}

Spezifikation

Das Pseudoelement ::view-transition-group ist in der View Transitions Module Level 1 Spezifikation definiert. Es ist als Candidate Recommendation Snapshot gekennzeichnet, was bedeutet, dass es weitgehend geprüft wurde und zu einer offiziellen W3C Recommendation werden soll, aber immer noch in der Praxis getestet wird.

Die Spezifikation besagt weiter

Dieses Dokument soll eine W3C Recommendation werden; es wird mindestens bis zum 5. Dezember 2023 als Candidate Recommendation bleiben, um zusätzliches Feedback zu sammeln.

Dieses Datum ist zum Zeitpunkt der Erstellung dieses Textes verstrichen. Achten Sie daher auf den Status des Dokuments, wenn es zu einer empfohlenen Funktion wird.

Browser-Unterstützung

Wenn Sie ältere Browser unterstützen müssen, die ::view-transition nicht unterstützen, versuchen Sie, @supports zu verwenden, um zu prüfen, ob der Browser die Eigenschaft view-transition-name erkennt.

/* Apply these styles only if View Transitions are *NOT* supported */
@supports not (view-transition-name: none) {
  /* Fallback Styles */
}

Weitere Informationen

Verwandt