Bereit für Entwicklertests: Übergänge mit eingeschränktem Umfang

Bramus

Veröffentlicht: 10. September 2025

Scoped View Transitions ist eine vorgeschlagene Erweiterung der View Transition API, mit der Sie eine Ansichtsübergang für einen Teilbaum des DOM starten können. Die Funktion kann ab Chrome 140 getestet werden, wenn das Flag „Experimentelle Webplattformfunktionen“ in chrome://flags aktiviert ist. Wir freuen uns über Feedback von Entwicklern.

Kurze Einführung

Rufen Sie zum Starten eines Übergangs mit eingeschränktem Bereich element.startViewTransition() (anstelle von document.startViewTransition()) für ein beliebiges HTMLElement mit angewendetem contain: layout auf.

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

Das Ergebnis ist ein Ansichtsübergang, der auf den Unterbaum des ausgewählten HTMLElement beschränkt ist. Der resultierende ::view-transition-Pseudobaum wird in dieses HTMLElement eingefügt. Das HTMLElement-Element dient als Container für die Übergangsanimationen.

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

Mit bereichsbezogenen Übergängen können mehrere Ansichtsübergänge gleichzeitig ausgeführt werden, sofern sie unterschiedliche Übergangsstamm-Elemente haben. Zeigerereignisse werden nur für diesen Teilbaum verhindert (was Sie wieder aktivieren können) und nicht für das gesamte Dokument. Außerdem können Elemente außerhalb des Übergangs-Roots über dem Ansichtsübergang mit Bereich gemalt werden.

Weitere Informationen zu Übergängen mit eingeschränkter Ansicht

Demo

In der folgenden Demo können Sie einen Punkt innerhalb seines Containers verschieben, indem Sie auf eine der Schaltflächen klicken. Das kann mit Ansichtsübergängen auf Dokumentebene oder auf Elementebene erfolgen. So können Sie sehen, wie sie sich unterschiedlich verhalten.

Bei Übergängen mit eingeschränktem Bereich wird der Punkt während des Übergangs weiterhin vom übergeordneten Element abgeschnitten. Außerdem wird der Pop-over nicht über den Punkt gelegt, wenn er angezeigt wird.

Wir freuen uns über Ihr Feedback

Wir freuen uns über Feedback von Webentwicklern zu folgenden Themen:

• Die Form der Scoped View Transitions API.
• Anwendungsfälle, in denen die Funktion gut funktioniert hat oder nicht wie erwartet funktioniert hat.
• Wie die Fragen zu Bereichen mit Selbstbeteiligung beantwortet werden sollten.

Hier können Sie Feedback geben. Machen Sie sich mit den bekannten Problemen und Einschränkungen vertraut, bevor Sie Feedback geben.

Wenn Sie auf einen Fehler stoßen, melden Sie ihn in Chromium.