Clipping-Probleme (und mehr) bei Ansichtsübergängen mit verschachtelten Ansichtsübergangsgruppen verhindern

Bramus

Vladimir Levin

Veröffentlicht: 22. September 2025

Wenn Sie eine Ansichtsübergang starten, erstellt der Browser automatisch Vorher- und Nachher-Snapshots von Elementen, die mit view-transition-name gekennzeichnet sind. Diese Snapshots werden in einem Baum von Pseudoelementen gerendert. Standardmäßig ist der generierte Baum „flach“. Das bedeutet, dass die ursprüngliche Hierarchie im DOM verloren geht und alle erfassten Gruppen für Ansichtsübergänge unter einem einzelnen ::view-transition-Pseudoelement gleichgeordnet sind.

Dieser Ansatz mit einer flachen Baumstruktur ist für viele Anwendungsfälle ausreichend, es gibt jedoch einige Styling-Anwendungsfälle, die damit nicht realisiert werden können. Im Folgenden finden Sie Beispiele für Effekte, die in einem flachen Baum unerwartete visuelle Auswirkungen haben können:

• Clipping (overflow, clip-path, border-radius): Clipping wirkt sich auf die untergeordneten Elemente des Elements aus. Das bedeutet, dass sich View-Übergangsgruppen-Geschwister nicht gegenseitig beschneiden können.
• opacity, mask-image und filter: Diese Effekte sind ebenfalls für ein vollständig gerastertes Bild eines Baums konzipiert und wirken sich auf die untergeordneten Elemente aus, anstatt jedes Element einzeln zu bearbeiten.
• 3D-Transformationen (transform-style, transform, perspective): Damit der gesamte Bereich der 3D-Transformationsanimationen angezeigt werden kann, muss eine gewisse Hierarchie beibehalten werden.

Das folgende Beispiel zeigt einen flachen Pseudobaum mit Elementen, die von einem übergeordneten Element im DOM-Baum abgeschnitten werden. Diese Elemente verlieren während des Ansichtsübergangs ihre Beschneidung, was zu einem fehlerhaften visuellen Effekt führt.

Verschachtelte Ansichtsübergangsgruppen sind eine Erweiterung von Ansichtsübergängen, mit der Sie ::view-transition-group-Pseudoelemente ineinander verschachteln können. Wenn Ansichtsübergangsgruppen verschachtelt sind, können Effekte wie das Zuschneiden während des Übergangs wiederhergestellt werden.

Von einem flachen Pseudobaum zu einem verschachtelten Pseudobaum

In der folgenden Demo können Sie auf den Avatar einer Person klicken, um weitere Informationen zu dieser Person aufzurufen. Die Animationen werden durch einen Ansichtsübergang im selben Dokument realisiert, bei dem die angeklickte Schaltfläche in den Dialog übergeht, der Avatar und der Name über den Bildschirm verschoben werden und die Absätze aus dem Dialog nach oben oder unten gleiten.

Wenn Sie sich die Demo genau ansehen, werden Sie feststellen, dass es ein Problem mit dem Übergang gibt: Obwohl die Absätze mit der Beschreibung untergeordnete Elemente des <dialog>-Elements im DOM sind, wird der Text während des Übergangs nicht durch das <dialog>-Element abgeschnitten:

<dialog id="info_bramus" closedby="any">
  <h2><img alt="…" class="avatar" height="96" width="96" src="avatar_bramus.jpg"> <span>Bramus</span></h2>
  <p>Bramus is …</p>
  <p>…</p>
</dialog>

Auch das Anwenden von overflow: clip auf die <dialog> hat keine Auswirkungen.

Das Problem liegt in der Art und Weise, wie Ansichtsübergänge ihren Pseudobaum erstellen und rendern:

• Im Pseudobaum sind standardmäßig alle Snapshots gleichrangig.
• Der Pseudobaum wird in einem ::view-transition-Pseudoelement gerendert, das über dem gesamten Dokument gerendert wird.

In dieser Demo sieht der DOM-Baum so aus:

html
  ├─ ::view-transition
  │  ├─ ::view-transition-group(card)
  │  │  └─ ::view-transition-image-pair(card)
  │  │     ├─ ::view-transition-old(card)
  │  │     └─ ::view-transition-new(card)
  │  ├─ ::view-transition-group(name)
  │  │  └─ ::view-transition-image-pair(name)
  │  │     ├─ ::view-transition-old(name)
  │  │     └─ ::view-transition-new(name)
  │  ├─ ::view-transition-group(avatar)
  │  │  └─ ::view-transition-image-pair(avatar)
  │  │     ├─ ::view-transition-old(avatar)
  │  │     └─ ::view-transition-new(avatar)
  │  ├─ ::view-transition-group(paragraph1.text)
  │  │  └─ ::view-transition-image-pair(paragraph1.text)
  │  │     └─ ::view-transition-new(paragraph1.text)
  │  └─ ::view-transition-group(paragraph2.text)
  │     └─ ::view-transition-image-pair(paragraph2.text)
  │        └─ ::view-transition-new(paragraph2.text)
  ├─ head
  └─ body
        └─ …

Da die ::view-transition-group(.text)-Pseudos die nachfolgenden Geschwister des ::view-transition-group(card)-Pseudos sind, werden sie über der Karte gerendert.

Damit ::view-transition-group(card)-Clips ::view-transition-group(.text) werden können, müssen die ::view-transition-group(.text)-Pseudos untergeordnete Elemente der ::view-transition-group(card) sein. Verwenden Sie dazu view-transition-group, mit dem Sie einem generierten ::view-transition-group()-Pseudoelement eine „übergeordnete Gruppe“ zuweisen können.

Sie haben zwei Möglichkeiten, die übergeordnete Gruppe zu ändern:

• Legen Sie für das übergeordnete Element view-transition-group auf contain fest, damit es alle untergeordneten Elemente mit einem view-transition-name enthält.
• Legen Sie für alle untergeordneten Elemente view-transition-group auf view-transition-name des übergeordneten Elements fest. Mit nearest können Sie auch die nächstgelegene übergeordnete Gruppe ausrichten.

Für diese Demo sieht der Code für die Verwendung verschachtelter Gruppen für Ansichtsübergänge so aus:

button.clicked,
dialog {
  view-transition-group: contain;
}

oder

button.clicked,
dialog *,
  view-transition-group: nearest;
}

Mit diesem Code werden die ::view-transition-group(.text)-Pseudos jetzt im ::view-transition-group(card)-Pseudo verschachtelt. Dies geschieht in einem zusätzlichen ::view-transition-group-children(…)-Pseudoelement, in dem alle verschachtelten Pseudoelemente zusammengefasst werden:

html
  ├─ ::view-transition
  │  ├─ ::view-transition-group(card)
  │  │  ├─ ::view-transition-image-pair(card)
  │  │  │  ├─ ::view-transition-old(card)
  │  │  │  └─ ::view-transition-new(card)
  │  │  └─::view-transition-group-children(card)
  │  │    ├─ ::view-transition-group(paragraph1.text)
  │  │    │  └─ ::view-transition-image-pair(paragraph1.text)
  │  │    │     └─ ::view-transition-new(paragraph1.text)
  │  │    └─ ::view-transition-group(paragraph2.text)
  │  │       └─ ::view-transition-image-pair(paragraph2.text)
  │  │          └─ ::view-transition-new(paragraph2.text)
  │  ├─ ::view-transition-group(name)
  │  │  └─ ::view-transition-image-pair(name)
  │  │     ├─ ::view-transition-old(name)
  │  │     └─ ::view-transition-new(name)
  │  └─ ::view-transition-group(avatar)
  │     └─ ::view-transition-image-pair(avatar)
  │        ├─ ::view-transition-old(avatar)
  │        └─ ::view-transition-new(avatar)
  ├─ head
  └─ body
        └─ …

Damit die Absätze mit dem ::view-transition-group(card)-Pseudoelement abgeschnitten werden, wenden Sie overflow: clip auf das ::view-transition-group-children(card)-Pseudoelement an:

::view-transition-group-children(card) {
  overflow: clip;
}

Das Ergebnis lautet:

Das ::view-transition-group-children-Pseudonym ist nur vorhanden, wenn verschachtelte Gruppen verwendet werden. Es wird an die border-box des ursprünglichen Elements angepasst und erhält einen transparenten Rahmen mit derselben Form und Rahmenstärke wie das Element, das das Pseudoelement generiert hat – card im vorherigen Beispiel.

Clips und mehr

Verschachtelte Gruppen für Ansichtsübergänge werden auch für andere Zwecke als Clipping-Effekte verwendet. Ein weiteres Beispiel sind 3D-Effekte. In der folgenden Demo gibt es eine Option, die Karte während des Übergangs in 3D zu drehen.

html:active-view-transition-type(open) {
    &::view-transition-old(card) {
        animation-name: rotate-out;
    }
    &::view-transition-new(card) {
        animation-name: rotate-in;
    }
}
html:active-view-transition-type(close) {
    &::view-transition-old(card) {
        animation-name: rotate-in;
    }
    &::view-transition-new(card) {
        animation-name: rotate-out;
    }
}

Ohne verschachtelte Gruppen für Ansichtsübergänge werden Avatar und Name nicht mit der Karte gedreht.

Wenn Sie die Pseudoelemente für Avatar und Namen in die Karte einbetten, kann der 3D-Effekt wiederhergestellt werden. Das ist aber nicht alles. Zusätzlich zur Rotation der ::view-transition-old(card)- und ::view-transition-new(card)-Pseudos müssen Sie auch das ::view-transition-group-children(card)-Pseudo rotieren.

html:active-view-transition-type(open) {
    &::view-transition-group-children(card) {
        animation: rotate-in var(--duration) ease;
        backface-visibility: hidden;
    }
}
html:active-view-transition-type(close) {
    &::view-transition-group-children(card) {
        animation: rotate-out var(--duration) ease;
        backface-visibility: hidden;
    }
}

Weitere Demos

Im folgenden Beispiel werden verschachtelte Gruppen für Ansichtsübergänge verwendet, um sicherzustellen, dass die Karten vom übergeordneten Scroller abgeschnitten werden. Mit den enthaltenen Steuerelementen können Sie die Verwendung von verschachtelten Ansichtsübergangsgruppen aktivieren oder deaktivieren.

Das Interessante an dieser Demo ist, dass alle ::view-transition-group(.card)-Pseudoelemente im ::view-transition-group(cards)-Pseudoelement des übergeordneten Elements verschachtelt und von diesem abgeschnitten werden. Die #targeted-card wird ausgeschlossen, weil ihre Ein- und Ausstiegsanimation nicht durch die ::view-transition-group(cards) abgeschnitten werden soll.

/* The .cards wrapper contains all children */
.cards {
  view-transition-name: cards;
  view-transition-group: contain;
}

/* Contents that bleed out get clipped */
&::view-transition-group-children(cards) {
  overflow: clip;
}

/* Each card is given a v-t-name and v-t-class */
.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

/* The targeted card is given a unique name (to style the pseudo differently)
   and shouldn't be contained by the ::view-transition-group-children(cards) pseudo */
#targeted-card {
  view-transition-name: targeted-card;
  view-transition-group: none;
}

Zusammenfassung

Bei verschachtelten Ansichtsübergängen können Sie einen Teil der Topologie des DOM-Baums beibehalten, wenn Sie die Pseudoelemente erstellen. Dadurch werden eine Vielzahl von Effekten ermöglicht, die mit Ansichtsübergängen bisher nicht möglich waren. Einige davon haben wir hier beschrieben.

Durch das Verschachteln ändert sich das Modell für die Erstellung von Ansichtsübergängen. Es ist für die Erstellung komplexer Effekte vorgesehen. Wie bereits erwähnt, können mit Ansichtsübergängen auf Elementebene auch einige der Effekte mit einem einfacheren Modell erzielt werden. Wir empfehlen Ihnen, beide Funktionen auszuprobieren, um herauszufinden, welche am besten zu Ihren Anforderungen passt.