Diese Seite wurde von der Cloud Translation API übersetzt.

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.
Übergänge zwischen ausgewählten Ansichten mit aktiven Typen

Diese Verbesserungen gelten sowohl für Ansichtsübergänge innerhalb desselben Dokuments für Single-Page-Anwendungen (SPA) als auch für Ansichtsübergänge zwischen Dokumenten für MPA.

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

Unterstützte Browser

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. Von den typischen Implementierungen, bei denen das Thumbnail zum großen Foto heranwächst, bis hin zu stark personalisierten, immersiven Erlebnissen wie diesem von Airbnb. Super!

Übergang zwischen Ansichten desselben Dokuments wie bei Airbnb.

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;
}

Für Ansichtsübergänge zwischen Dokumenten werden dieselben Bausteine und Prinzipien verwendet wie für Ansichtsübergänge innerhalb eines Dokuments. 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 verwenden, um die Ladezeit zu verbessern, bevor die Ansichtsübergang ausgeführt wird.

Demo

In dieser Demo des Stack Navigators werden alle diese Funktionen (zusammen mit einigen Verbesserungen) kombiniert.

Aufzeichnung der Demo für den Stack Navigator. Es werden dokumentübergreifende Ansichtsübergänge verwendet, die im Ereignis pagereveal basierend auf Informationen zur Navigationsaktivierung angepasst werden. Außerdem wird das Vorab-Rendering verwendet.

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 bei Übergängen ansehen

Neben der Bereitstellung von dokumentübergreifenden Ansichtsübergängen für MPA enthält Chrome auch einige Verbesserungen bei der Arbeit mit Ansichtsübergängen im Allgemeinen.

Diese Verbesserungen gelten sowohl für Ansichtsübergänge innerhalb eines Dokuments bei SPAs als auch für seitenübergreifende Ansichtsübergänge bei MPAs.

Animationsstile mit `view-transition-class` teilen

Unterstützte Browser

Bisher mussten Sie beim Animieren mehrerer Snapshots auf jeden einzelnen Snapshot einzeln anwenden, indem Sie die Pseudoauswahl für jedes Element mit einer eindeutigen view-transition-name wiederholten.

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.

Aufzeichnung der Demo für Karten. Mit view-transition-class wird dieselbe animation-timing-function auf alle Karten angewendet, mit Ausnahme der hinzugefügten oder entfernten.

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

Auswahl der Ansichtsübergänge für aktive Typen

Unterstützte Browser

Eine weitere Verbesserung bei Ansichtsübergängen ist die Möglichkeit, beim Aufzeichnen und Ausführen eines Ansichtsübergangs Typen hinzuzufügen. So können Sie einfacher mit verschiedenen Ansichtsübergängen auf derselben Seite arbeiten, ohne dass sich die Deklarationen der einen auf die andere auswirken.

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.

Aufzeichnung der Demo zur Paginierung. Anhand der Typen wird festgelegt, welche Animation verwendet werden soll. Die Stile werden im Stylesheet dank aktiver Übergangstypen voneinander getrennt.

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 Typen für Ansichtsübergänge können Sie dasselbe Ergebnis erzielen. Außerdem werden diese Typen automatisch bereinigt, sobald die Ansichtsübergänge abgeschlossen sind. Die Typen gelten nur beim Aufzeichnen oder Ausführen des Übergangs.

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 @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 verschiedenen Arten 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, erstellen Sie stattdessen einen Eintrag für das Problem in Chromium.

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

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

Demo

Dokumentation lesen

Verbesserungen bei Übergängen ansehen

Animationsstile mit view-transition-class teilen

Auswahl der Ansichtsübergänge für aktive Typen

Feedback

Animationsstile mit `view-transition-class` teilen