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: Ansichtsübergänge zwischen Dokumenten für Anwendungen mit mehreren Seiten (Multi-Page Applications, MPA).

Außerdem habe ich einige Verbesserungen vorgestellt, die die Arbeit mit Ansichtsübergängen im Allgemeinen erleichtern.

• Animierte Stile zwischen Pseudo-Elementen für Ansichtsübergänge mit view-transition-class teilen.
• Selektive Ansichtsübergänge mit aktiven Typen.

Diese Verbesserungen gelten sowohl für Ansichtsübergänge im selben Dokument für Single-Page-Anwendungen (SPAs) als auch für Ansichtsübergänge zwischen Dokumenten für MPAs.

Dokumentübergreifende Ansichtsübergänge für MPA-Anzeigen

In Chrome 111 hat das Chrome-Team Ansichtsübergänge im selben Dokument für Single-Page-Anwendungen eingeführt. Diese Funktion wurde von der Webentwickler-Community sehr gut aufgenommen.

Es ist toll zu sehen, was viele von euch mit Ansichtsübergängen entwickelt haben. Die typischen Implementierungen reichen von der einfachen Vergrößerung des Thumbnails zum großen Foto bis hin zu hochgradig angepassten immersiven Erlebnissen wie diesem 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. View Transitions sind jetzt standardmäßig für Navigationen mit demselben Ursprung aktiviert. Sie können jetzt einen Ansichtsübergang zwischen zwei verschiedenen Dokumenten erstellen, die denselben Ursprung haben.

Damit Übergänge zwischen Dokumenten möglich sind, müssen beide Enden aktiviert werden. Verwenden Sie dazu die @-Regel @view-transition und setzen Sie den Deskriptor navigation auf auto.

@view-transition {
  navigation: auto;
}

Für Übergänge zwischen Dokumenten werden dieselben Bausteine und Prinzipien wie für Übergänge innerhalb eines Dokuments verwendet. Elemente mit dem Attribut 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, über die Sie auf das Ansichtsübergangsobjekt zugreifen können.

• Mit pageswap können Sie kurz vor der Aufnahme 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, mit dem Sie einen dokumentübergreifenden Ansichtsübergang basierend auf den alten und neuen Zielverlaufseinträgen oder dem Navigationstyp anpassen können.

Außerdem können Sie mit Renderblocking warten, bis Inhalte geladen sind, und auf Prerendering setzen, um die Ladezeit vor dem Ausführen des Ansichtsübergangs zu verbessern.

Demo

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

Dies ist eine MPA mit dokumentübergreifenden Navigationen, die auf demselben Ursprung gehostet wird. Wenn Sie pagereveal verwenden, wird der Animationstyp anhand der alten und neuen Einträge im 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 Übergängen zwischen Dokumentansichten finden Sie in unserer Dokumentation zu Übergängen zwischen Dokumentansichten.

Verbesserungen bei Übergängen ansehen

Neben der Einführung von Übergängen für die Dokumentansicht für MPA enthält Chrome auch einige Verbesserungen für die allgemeine Arbeit mit Übergängen für die Ansicht.

Diese Verbesserungen gelten sowohl für Ansichtsübergänge im selben Dokument für SPAs als auch für Ansichtsübergänge zwischen Dokumenten für MPAs.

Animationsstile mit view-transition-class teilen

Bisher mussten Sie bei der Animation mehrerer Snapshots auf dieselbe Weise jeden Snapshot einzeln ansprechen, indem Sie seinen Pseudoselektor für jedes Element mit einem 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 Pseudoselektoren, um alle übereinstimmenden Snapshots anzusprechen. Das Ergebnis sind viel einfachere Selektoren, die automatisch von einem auf viele Elemente skaliert werden.

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

Im folgenden Beispiel für Karten wird view-transition-class verwendet, um mit einem Selektor dasselbe Animations-Timing auf viele Snapshots anzuwenden.

Weitere Informationen zu view-transition-classview-transition-class

Selektive Ansichtsübergänge mit aktiven Typen

Eine weitere Verbesserung bei Ansichtsübergängen ist die Möglichkeit, Typen hinzuzufügen, wenn ein Ansichtsübergang erfasst und ausgeführt wird. So ist es einfacher, mit verschiedenen Ansichtsübergängen auf derselben Seite zu arbeiten, ohne dass sich die Deklarationen gegenseitig ändern.

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

Vor der Einführung aktiver Typen konnten Sie dem DOM Klassen hinzufügen und in Ihrem CSS darauf reagieren. Sie müssten jedoch auch nach Abschluss der Übergänge aufräumen.

Mit Ansichtsübergangstypen können Sie dasselbe Ergebnis erzielen. Ein zusätzlicher Vorteil ist, dass diese Typen automatisch bereinigt werden, sobald der Ansichtsübergang abgeschlossen ist. Die Typen gelten nur beim Erfassen oder Ausführen des Übergangs.

Bei Ansichtsübergängen im selben Dokument übergeben Sie types an die Methode startViewTransition, die jetzt ein Objekt akzeptiert. update ist die Callback-Funktion, die das DOM aktualisiert, und types ist eine Folge von Strings.

const direction = determineBackwardsOrForwards();

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

Bei einem dokumentübergreifenden Ansichtsübergang legen Sie Typen in der @view-transition-Regel mit dem types-Deskriptor fest oder legen Sie sie spontan in den pageswap- und pagereveal-Ereignissen fest.

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

Nachdem Sie die Typen festgelegt haben, können Sie in Ihrem CSS mit den Pseudoklassenselektoren :active-view-transition-type() und :active-view-transition darauf reagieren, die auf den Ansichtsübergangs-Root 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 entsprechenden Dokumentation zu Ansichtsübergängen im selben Dokument und Ansichtsübergängen zwischen Dokumenten.

Feedback

Wir freuen uns immer über Feedback von Entwicklern. Reichen Sie dazu ein Problem bei der CSS Working Group auf GitHub ein und machen Sie Vorschläge oder stellen Sie Fragen. Stellen Sie Ihrem Problem das Präfix [css-view-transitions] voran.

Sollten Sie auf einen Fehler stoßen, erstellen Sie in Chromium einen Eintrag für das Problem.