Cross-Document View Transitions für Multi-Page Applications

View Transitions auf die nächste Ebene heben

In unserem Artikel Nutze die View Transition API in jedem Projekt haben wir die View Transition API im Kontext eines einzelnen Dokuments betrachtet. Nun gehen wir einen Schritt weiter und implementieren animierte Übergänge zwischen verschiedenen Dokumenten.

Dokumentübergreifende View Transitions schließen die Lücke zwischen traditionellen Multi-Page Applications und Single-Page Applications in Bezug auf die Benutzererfahrung. Dies ermöglicht Entwickler:innen einen einfachen Zugang zu der flüssigen Navigation, die typischerweise mit Single-Page Applications verbunden ist.

Browser-Unterstützung

Wie in unserem vorherigen Artikel erwähnt, entwickelt sich die Browser-Unterstützung für die View Transition API stetig weiter. Dokumentübergreifende View Transitions werden derzeit von Chromium und Safari unterstützt. Dennoch können wir diese Animationen als Progressive Enhancements implementieren.

Implementierung von dokumentübergreifenden View Transitions

Die Implementierung von dokumentübergreifenden View Transitions erfordert das Setzen der CSS-Query @view-transition. Unterstützende Browser werden animierte Übergänge während der Navigation anwenden, während nicht unterstützende Browser normal ohne visuelle Effekte navigieren.

@view-transition {
  navigation: auto;
}

Sobald du die CSS-Query gesetzt hast, kannst du die CSS-Eigenschaft view-transition-name verwenden, um einfache Überblendeffekte auf Seiten in deiner Anwendung anzuwenden – genauso wie du es von dokumentinternen View Transitions gewohnt bist.

<main>
  <article style="view-transition-name: article-41;"></article>
  <article style="view-transition-name: article-42;"></article>
  <article style="view-transition-name: article-43;"></article>
</main>

Beachte, dass die CSS-Eigenschaft view-transition-name, wie oben zu sehen, für jedes zu animierende Element eindeutig sein muss.

Styling von View Transitions zwischen Dokumenten

Wie bei dokumentinternen View Transitions können wir CSS verwenden, um das Erscheinungsbild der Übergänge zwischen Dokumenten zu steuern. Standardmäßig verwenden View Transitions einen Überblendeffekt für den Wechsel zwischen den vom Browser erfassten Element-Snapshots.

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
}

::view-transition-new(root) {
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-in;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Während root die gesamte Seite beeinflusst, können wir auch bestimmte Elemente für Animationen gezielt ansprechen, indem wir die CSS-Eigenschaft view-transition-name selektiver einsetzen. Dies gibt uns die Möglichkeit, mehrere Elemente individuell und gleichzeitig in einem einzigen Übergang zu animieren.

.page-transition-element {
  view-transition-name: page-element;
}

::view-transition-old(page-element) {
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out;
}

::view-transition-new(page-element) {
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in;
}

@keyframes slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

Praktisches Beispiel: Kontinuität

Ein häufiger Anwendungsfall für View Transitions zwischen Dokumenten ist die Aufrechterhaltung der Kontinuität von Elementen zwischen Seiten. Zum Beispiel, wenn ein Benutzer auf eine Artikel-Vorschau in einer Liste klickt, um den Artikelinhalt auf einer Detailseite anzusehen.

Genau dieses Beispiel wird auf unserer Website verwendet, um ein nahtloses Erlebnis zwischen der Startseite und der Artikeldetailseite zu bieten.

<article>
  <a
    href='/de/blog/web/article-42'
    style='view-transition-name: article-42;'
  >
    <img
      src='/almas-salakhov-oAL2kADlRTk-unsplash.jpg'
      alt='3D-Rendering von Almas Salakhov'
    />
    <h2>Artikel 42 – Die Antwort auf alles</h2>
  </a>
</article>

<main>
  <header style='view-transition-name: article-42;'>
    <img
      src='/almas-salakhov-oAL2kADlRTk-unsplash.jpg'
      alt='3D-Rendering von Almas Salakhov'
    />
    <h1>Artikel 42 – Die Antwort auf alles</h1>
  </header>
</main>

Mit den passenden View-Transition-Stilen wird die Vorschau sanft von ihrer Position auf der Startseite zu ihrer Position auf der Artikeldetailseite animiert, was ein nahtloses und ansprechendes Benutzererlebnis schafft.

Einschränkungen und Überlegungen

View Transitions zwischen Dokumenten bieten leicht anzuwendende Vorteile, bringen jedoch einige Einschränkungen und Überlegungen mit sich. Derzeit ist die Browser-Unterstützung auf Chromium und Safari beschränkt, was eine konsistente Implementierungsstrategie beeinflussen kann.

Komplexe Animationen mit großen DOM-Änderungen können die Leistung beeinträchtigen, und der JavaScript-Zustand wird nicht automatisch zwischen Seiten beibehalten. Server-gerenderte Anwendungen erfordern zusätzliche Implementierungsüberlegungen.

Trotz dieser Herausforderungen macht die verbesserte Benutzererfahrung die View Transitions API als Progressive Enhancement wertvoll. Mit der Weiterentwicklung der View Transition API können wir in Zukunft erweiterte Funktionen, bessere Leistung und breitere Browser-Unterstützung erwarten.

TL;DR

Dokumentübergreifende View Transitions ermöglichen geschmeidige Animationen zwischen Seiten in Multi-Page Applications. Sie erhalten die Kontinuität von Elementen über die Navigation hinweg, verbessern die Benutzererfahrung und bewahren die Vorteile der Multi-Page-Architektur – trotz begrenzter Browser-Unterstützung.