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

Bramus

Auf der Google I/O 2024 habe ich den nächsten Schritt für die Umstellung von Ansichten angekündigt: dokumentübergreifende Ansichtsübergänge für mehrseitige Anwendungen (MPA).

Darüber hinaus habe ich einige Verbesserungen veröffentlicht, die die Arbeit mit Übergängen von Ansichten im Allgemeinen erleichtern.

• Animationsstile zwischen Pseudoelementen des Ansichtsübergangs mit view-transition-class teilen.
• Selektive Ansichtsübergänge mit aktiven Typen.

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

Übergänge dokumentübergreifender Ansicht für MPAs

Mit Chrome 111 hat das Chrome-Team Übergänge bei der Dokumentansicht für Single-Page-Anwendungen eingeführt, eine Funktion, die in der Webbuilding-Community sehr beliebt ist.

Es ist interessant zu sehen, was viele von Ihnen mit View-Übergängen erstellt haben. Von den typischen Implementierungen, bei denen „das Thumbnail zum großen Foto wird“, bis hin zu stark angepassten immersiven Erlebnissen wie diese von Airbnb. Super!

Für die anfängliche Implementierung war es jedoch erforderlich, eine SPA zu erstellen, um Aufrufübergänge zu verwenden. Ab Chrome 126 ist dies nicht mehr der Fall. Übergänge für Ansichten sind jetzt standardmäßig für Navigationen am selben Ursprung aktiviert. Sie können jetzt einen Ansichtsübergang zwischen zwei verschiedenen Dokumenten mit demselben Ursprung erstellen.

Um dokumentenübergreifende Ansichtsübergänge zu ermöglichen, müssen beide Seiten zustimmen. Verwenden Sie dazu die At-Regel @view-transition und legen Sie den Deskriptor navigation auf auto fest.

@view-transition {
  navigation: auto;
}

Für dokumentenübergreifende Ansichtsübergänge gelten dieselben Bausteine und Prinzipien wie für Übergänge bei der Ansicht desselben Dokuments. Elemente, auf die ein view-transition-name angewendet wird, werden erfasst und Sie können die Animationen mithilfe von CSS-Animationen anpassen.

Wenn Sie dokumentübergreifende Ansichtsübergänge anpassen möchten, verwenden Sie die Ereignisse pageswap und pagereveal, mit denen Sie Zugriff auf das Objekt für den Ansichtswechsel erhalten.

• Mit pageswap können Sie in letzter Minute einige Änderungen auf der ausgehenden Seite vornehmen, bevor die alten Snapshots aufgenommen werden.
• Mit pagereveal können Sie eine neue Seite anpassen, bevor sie nach der Initialisierung gerendert wird.

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

Außerdem kannst du das Laden der Inhalte mit Blockierungen für das Rendering abwarten und auf das Pre-Rendering verlassen, um die Ladezeit zu verkürzen, bevor der Ansichtsübergang ausgeführt wird.

Demo

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

Dies ist eine MPA mit dokumentenübergreifenden Navigationen, die am selben Ursprung gehostet wird. Mit pagereveal 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 dokumentübergreifenden Ansichtsübergängen finden Sie in unserer Dokumentation zu dokumentübergreifenden Ansichtsumstellungen.

Verbesserungen bei den Übergängen ansehen

Neben der Bereitstellung dokumentübergreifender Ansichtsübergänge für MPA enthält Chrome auch einige Optimierungen für die allgemeine Arbeit mit Ansichtsübergängen.

Diese Verbesserungen gelten sowohl für die Übergänge bei der Ansicht des selben Dokuments für die SPA als auch für die Übergänge der dokumentübergreifenden Ansicht für MPA.

Animationsstile mit view-transition-class teilen

Bisher mussten Sie beim Animieren mehrerer Snapshots auf die gleiche Weise jeden Snapshot einzeln als Ziel festlegen, indem Sie seinen Pseudo-Selektor für jedes Element mit einer eindeutigen view-transition-name wiederholen.

Mit view-transition-class können Sie jetzt allen Snapshots einen gemeinsamen Namen hinzufügen. Verwenden Sie diesen gemeinsamen Namen in der Pseudoauswahl, um ein Targeting auf alle übereinstimmenden Snapshots vorzunehmen. Dies führt zu weitaus einfacheren Selektoren, die automatisch von einem Element auf viele Elemente skaliert werden.

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

Im folgenden Kartenbeispiel wird view-transition-class verwendet, um mit einem Selektor dasselbe Animationstiming auf viele Snapshots anzuwenden.

Weitere Informationen zu view-transition-class finden Sie in der entsprechenden Dokumentation zu view-transition-class.

Selektive Ansichtsübergänge mit aktiven Typen

Eine weitere Verfeinerung bei der Anzeige von Übergängen ist die Einführung des Hinzufügens von Typen zu einem View-Übergang bei der Erfassung und Ausführung. So ist es einfacher, mit verschiedenen Ansichtsübergängen auf derselben Seite zu arbeiten, ohne dass die Deklarationen der einen Ansicht die andere ändern.

Wenn Sie beispielsweise in einer Paginierungssequenz zur nächsten oder zur vorherigen Seite wechseln, können Sie unterschiedliche Animationen verwenden, je nachdem, ob Sie eine höhere oder eine niedrigere Seite aus der Abfolge aufrufen.

Vor aktiven Typen konnten Sie Klassen zum DOM hinzufügen und in Ihrem CSS auf diese Klassen antworten. Nach Abschluss der Umstellungen müssten Sie jedoch eine Bereinigung durchführen.

Mit den Arten von Ansichtsübergängen können Sie dasselbe Ergebnis erzielen, mit dem zusätzlichen Vorteil, dass diese Typen automatisch bereinigt werden, sobald der Ansichtsübergang abgeschlossen ist. Typen werden nur beim Erfassen oder Ausführen des Übergangs angewendet.

Für Übergänge bei der Ansicht desselben Dokuments übergeben Sie den 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],
}););

Für einen dokumentenübergreifenden Wechsel der Ansicht legen Sie Typen in der @view-transition-at-Regel mit dem types-Deskriptor fest oder legen Sie sie direkt in den pageswap- und pagereveal-Ereignissen fest.

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

Wenn die Typen festgelegt sind, können Sie in Ihrem CSS-Code mithilfe der Pseudoklassenselektoren :active-view-transition-type() und :active-view-transition auf diese Typen reagieren, die für den Stamm der Ansichtsübergang gelten.

/* 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 entsprechenden Dokumentation zu Übergängen der Ansicht eines Dokuments und Dokumentübergreifend.

Feedback

Wir freuen uns immer über Feedback von Entwicklern. Melden Sie dazu bei der CSS-Arbeitsgruppe auf GitHub ein Problem mit Vorschlägen und Fragen. Stellen Sie dem Problem „[css-view-transitions]“ als Präfix vor.

Falls ein Fehler auftritt, melde den Fehler in Chromium.