Was ist neu bei Ansichtsübergängen? (Update zur Google I/O 2024)

Bramus

Veröffentlicht: 16. Mai 2024

Auf der Google I/O 2024 habe ich den nächsten Schritt für Ansichtsübergänge angekündigt: dokumentübergreifende Ansichtsübergänge für mehrseitige Anwendungen (Multi-Page Applications, MPAs).

Außerdem habe ich einige Verbesserungen vorgestellt, mit denen Sie allgemein einfacher mit Ansichtsübergängen arbeiten können.

• Mit view-transition-class können Sie Animationsstile zwischen Pseudoelementen für Ansichtsübergänge freigeben.
• Selektive Ansichtsübergänge mit aktiven Typen.

Diese Verbesserungen gelten sowohl für Übergänge bei Ansichtsänderungen für dasselbe Dokument bei Single-Page-Anwendungen (SPA) als auch für dokumentübergreifende Ansichtsübergänge für MPA-Dateien.

Dokumentübergreifende Ansichtsübergänge für Multimedia-Publisher-Anzeigen

In Chrome 111 hat das Chrome-Team Übergänge zwischen Ansichten desselben Dokuments für Single-Page-Anwendungen eingeführt. Diese Funktion wurde von der Webentwicklungs-Community gut aufgenommen.

Es ist toll zu sehen, was viele von euch mit Ansichtsübergängen erstellt haben. Das reicht von typischen Implementierungen, bei denen das Thumbnail zum großen Foto passt, bis hin zu maßgeschneiderten immersiven Erlebnissen wie dieser von Airbnb. Super!

Bei der ursprünglichen Implementierung mussten Sie jedoch eine SPA erstellen, um Ansichtsübergänge zu verwenden. Ab Chrome 126 ist das nicht mehr der Fall. Ansichtsübergänge sind jetzt standardmäßig für Navigationen innerhalb desselben Ursprungs aktiviert. Sie können jetzt einen Ansichtsübergang zwischen zwei verschiedenen Dokumenten mit derselben Quelle erstellen.

Damit Ansichtsübergänge zwischen Dokumenten möglich sind, müssen beide Enden die Funktion aktivieren. Verwenden Sie dazu die At-rule @view-transition und legen Sie den Deskriptor navigation auf auto fest.

@view-transition {
  navigation: auto;
}

Bei dokumentübergreifenden Übergängen für die Ansicht werden die gleichen Bausteine und Prinzipien wie für die Ansicht bei Ansichten im selben Dokument verwendet. Elemente mit einer view-transition-name werden erfasst und Sie können die Animationen mit CSS-Animationen anpassen.

Wenn Sie dokumentübergreifende Ansichtsübergänge anpassen möchten, verwenden Sie die Ereignisse pageswap und pagereveal. Damit erhalten Sie Zugriff auf das Ansichtsübergangsobjekt.

• Mit pageswap können Sie kurz vor dem Erstellen der alten Snapshots noch Änderungen an der ausgehenden Seite vornehmen.
• Mit pagereveal können Sie die neue Seite anpassen, bevor sie nach der Initialisierung gerendert wird.

Bei beiden Ereignissen haben Sie Zugriff auf ein NavigationActivation-Objekt, um einen dokumentübergreifenden Ansichtsübergang basierend auf den alten und neuen Zielverlaufseinträgen oder dem Navigationstyp anzupassen.

Außerdem können Sie mit dem Render-Blocking warten, bis die Inhalte geladen sind, und das Pre-Rendering nutzen, um die Ladezeit zu verbessern, bevor die Ansichtsübergang ausgeführt wird.

Demo

In dieser Stack Navigator-Demo werden alle diese Funktionen sowie einige Verbesserungen kombiniert.

Dies ist eine MPA mit dokumentübergreifender Navigation, die am selben Ursprung gehostet wird. Bei Verwendung von pagereveal wird die Art der Animation anhand der Einträge im alten und neuen Zielverlauf bestimmt.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

Dokumentation lesen

Weitere Informationen zum Aktivieren und Anpassen von Dokumentansichten finden Sie in der Dokumentation zu Dokumentansichten.

Verbesserungen beim Ansehen von Übergängen

Neben dem Versand dokumentübergreifender Übergänge für die Ansicht für MPA-Dateien wurden in Chrome auch einige allgemeine Verbesserungen an der Arbeit mit Übergängen von Ansichten vorgenommen.

Diese Verbesserungen gelten sowohl für Ansichtsübergänge innerhalb desselben Dokuments für SPAs als auch für Ansichtsübergänge zwischen Dokumenten für MPAs.

Animationsstile mit view-transition-class teilen

Bisher mussten Sie beim Animieren mehrerer Snapshots auf die gleiche Weise jeden Snapshot einzeln als Ziel festlegen. Dazu wiederholten Sie die Pseudoauswahl für jedes Element mit einer eindeutigen view-transition-name.

Mit view-transition-class können Sie jetzt allen Snapshots einen gemeinsamen Namen hinzufügen. Verwenden Sie diesen gemeinsamen Namen in den Pseudoauswahlen, um die Ausrichtung auf alle übereinstimmenden Snapshots vorzunehmen. Das führt zu wesentlich einfacheren Auswahlen, die automatisch von einem auf mehrere Elemente skaliert werden.

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

Im Beispiel für Karten wird view-transition-class verwendet, um mit einer einzigen Auswahl das gleiche Animationstiming auf viele Snapshots anzuwenden.

Weitere Informationen zu view-transition-class findest du in der entsprechenden Dokumentation.view-transition-class

Selektive Ansichtsübergänge mit aktiven Typen

Eine weitere Optimierung zur Anzeige von Übergängen ist die Einführung von Typen, die einem Ansichtsübergang beim Erfassen und Ausführen hinzugefügt werden. Dies erleichtert die Arbeit mit verschiedenen Ansichtsübergängen auf derselben Seite, ohne dass die Deklarationen des einen die andere ändern.

Wenn Sie beispielsweise in einer Paginierungssequenz zur nächsten oder zur vorherigen Seite wechseln, können Sie je nachdem, ob Sie zu einer höheren oder niedrigeren Seite der Sequenz wechseln, unterschiedliche Animationen verwenden.

Vor aktiven Typen konnten Sie dem DOM Klassen hinzufügen und in Ihrem CSS auf diese Klassen reagieren. Sie müssten jedoch auch nach Abschluss der Umstellungen aufräumen.

Mit den Arten von Ansichten können Sie dasselbe Ergebnis erzielen. Der zusätzliche Vorteil dieser Typen wird jedoch automatisch bereinigt, sobald der Übergang von der Ansicht abgeschlossen ist. Typen werden nur angewendet, wenn der Übergang erfasst oder durchgeführt wird.

Wenn Sie Ansichtsübergänge innerhalb desselben Dokuments verwenden möchten, geben Sie types an die Methode startViewTransition weiter, die jetzt ein Objekt akzeptiert. update ist die Rückruffunktion, die das DOM aktualisiert, und types ist eine Sequenz von Strings.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

Wenn Sie einen dokumentübergreifenden Ansichtsübergang verwenden möchten, legen Sie die Typen in der At-rule-Anweisung @view-transition mit dem types-Beschreibungselement fest oder legen Sie sie direkt in den Ereignissen pageswap und pagereveal fest.

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

Nachdem Sie die Typen festgelegt haben, können Sie in Ihrem CSS mithilfe der Pseudoklassen-Selektoren :active-view-transition-type() und :active-view-transition auf diese Typen reagieren, die auf den Stamm der Ansichtsübergang angewendet werden.

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

Weitere Informationen zu den Typen von Ansichtsübergängen finden Sie in der Dokumentation zu Ansichtsübergängen innerhalb eines Dokuments und in der Dokumentation zu Ansichtsübergängen zwischen Dokumenten.

Feedback

Wir freuen uns immer über Feedback von Entwicklern. Melden Sie dazu ein Problem mit Vorschlägen und Fragen an die CSS-Arbeitsgruppe auf GitHub. Stellen Sie dem Problem das Präfix [css-view-transitions] voran.

Sollten Sie auf einen Fehler stoßen, melden Sie den Fehler in Chromium.