Chrome 147 ermöglicht gleichzeitige und verschachtelte Ansichtsübergänge mit elementbezogenen Ansichtsübergängen

Bramus

Veröffentlicht am: 27. März 2026

In Chrome 147 werden Ansichtsübergänge mit Elementbereich eingeführt. Mit dieser Funktion können Sie einen Ansichtsübergang für eine Unterstruktur des DOM starten, indem Sie Element.startViewTransition() aufrufen.

Mit dieser Funktion können mehrere Ansichtsübergänge gleichzeitig ausgeführt werden. Außerdem können Sie laufende Ansichtsübergänge verschachteln und Probleme mit der Überlagerung von position: fixed-Inhalten beheben. Der Rest der Seite bleibt dabei interaktiv.

Was hat sich geändert?

Seit der Ankündigung, dass die Funktion in Chrome 140 für Entwicklertests bereit ist, haben wir mit der Community und der CSS Working Group zusammengearbeitet, um die Details zu finalisieren, insbesondere in Bezug auf das Standardverhalten:

  • Bereichsstammverzeichnisse sind standardmäßig selbstbeteiligt.
  • Bereichsbezogene Ansichtsübergänge enthalten automatisch ihre verschachtelten Pseudoelemente, indem verschachtelte Ansichtsübergangsgruppen verwendet werden.
  • Das Pseudoelement ::view-transition-group-children() in einem bereichsbezogenen Ansichtsübergang schneidet seine Inhalte automatisch ab, wenn das Bereichsstammverzeichnis seinen Überlauf abschneidet.
  • Bei Ansichtsübergängen mit Elementbereich werden während des Übergangs automatisch contain: layout und view-transition-scope: all auf das Bereichsstammverzeichnis angewendet.

Nach diesen Updates sind Ansichtsübergänge mit Elementbereich in der stabilen Version von Chrome ab Version 147 verfügbar.

Demos

Listen mischen

In dieser Demo können Sie die Elemente in jeder Liste mischen. Sie können auch die Positionen der Listen vertauschen, indem Sie die Schaltfläche in der Mitte auswählen.

Live-Demo

Demoaufzeichnung

Da Ansichtsübergänge mit Elementbereich verwendet werden, können beide Listen ihre Ansichtsübergänge gleichzeitig ausführen. Sie können auch den äußeren Ansichtsübergang starten, der die Positionen der Listen vertauscht, während die Listenelemente noch neu angeordnet werden.

Meine Patagonienreise

In der Demo „Meine Patagonienreise“ werden Ansichtsübergänge mit Elementbereich veranschaulicht. Diese Demo basiert auf dem Kampagnenvideo „Web UX, re-imagined“.

Verwenden Sie die Drop-down-Menüs , um die Rasterelemente zu filtern. Klicken Sie bei jedem Rasterelement auf die Schaltfläche Hinzufügen , um es der Liste der ausgewählten Elemente hinzuzufügen, die in der Seitenleiste angezeigt wird.

Live-Demo

Wenn Sie die vollständige Demo ansehen möchten, öffnen Sie "Meine Patagonienreise" auf einem separaten Tab.

Demoaufzeichnung

In der Demo werden Ansichtsübergänge mit Elementbereich an drei Stellen verwendet:

  • Das Raster der Elemente beim Filtern.
  • Die Elemente des Rasters, wenn sie der Liste der ausgewählten Elemente hinzugefügt werden.
  • Die Seitenleiste mit der Liste der ausgewählten Elemente.

Leitfaden lesen

Weitere Informationen zu Ansichtsübergängen mit Elementbereich finden Sie im Leitfaden. Dort wird beschrieben, wie Sie Ansichtsübergänge mit Elementbereich implementieren, und es werden zusätzliche Details und weitere Demos erläutert.

Leitfaden zu Ansichtsübergängen mit Elementbereich lesen