Nutze die View Transition API in jedem Projekt • Aggregata

Die Texte in diesem Artikel wurden teilweise mit Hilfe künstlicher Intelligenz erarbeitet und von uns korrigiert und überarbeitet. Für die Generierung wurden folgende Dienste verwendet:

Claude Sonnet DeepL Write DeepL Translate

Wie wir maschinelles Lernen bei der Erstellung unserer Artikel einsetzen

Progressive Enhancements

Die View Transition API ist für die meisten Browser noch relativ neu und hat die definierte Baseline noch nicht ganz erreicht. Während Chromium-basierte Browser und Safari die API entweder vollständig oder teilweise implementiert haben, befindet sie sich bei Browsern wie Firefox noch im Prozess der Einführung.

Glücklicherweise können View Transitions als Progressive Enhancement behandelt werden. Das bedeutet, dass wir die API in unseren Anwendungen nutzen und einen Fallback für Browser bereitstellen können, die sie nicht unterstützen. In diesem Artikel werden wir genau untersuchen, wie das funktioniert.

Möglicherweise hast du die View Transitions bereits bei Aggregata in Aktion gesehen, insbesondere die dokumentübergreifenden View Transitions, die für reibungslose Übergänge zwischen der Startseite und den verschiedenen Artikelseiten sorgen.

Erste Schritte

Um View Transitions optimal zu nutzen und gleichzeitig die Kernfunktionalität der Anwendung zu bewahren, haben wir ein Fallback-Verhalten für nicht unterstützte Browser eingerichtet und ein neues Standardverhalten für Browser implementiert, die die API unterstützen.

const useViewTransition = (method: Function) => {
  if (!document.startViewTransition) {
    // Fallback-Verhalten
    method();
    return;
  }

  // Standardverhalten
  document.startViewTransition(() => method());
};

useViewTransition(() => customMethodToUpdateDOM());

Benutzerdefinierte Übergänge

Nachdem wir eine einfache Methode zur Erfassung unserer DOM-Manipulationen eingerichtet haben, können wir beginnen, die Übergänge nach unseren Wünschen anzupassen. Standardmäßig verwenden View Transitions einen Überblendeffekt für den Übergang zwischen den vom Browser erfassten Element-Snapshots.

In diesem Fall verwenden wir CSS, um unsere Elemente anzusprechen und mit Animationen und Übergängen ein ansprechenderes Erlebnis zu schaffen. Die View Transition API stellt verschiedene Pseudo-Elemente bereit, die für die Stilanwendung genutzt werden können. Für diese Demonstration verwenden wir folgende:

::view-transition-old(): Erfasster Snapshot der alten Ansicht.
::view-transition-new(): Live-Darstellung der neuen Ansicht.

::view-transition-old(root) {
  animation: 150ms ease-out both fade-out;
}

::view-transition-new(root) {
  animation: 150ms ease-in 150ms both fade-in;
}

root bezieht sich auf die :root Pseudo-Klasse, die das Dokument-Wurzelelement auswählt (<html> standardmäßig), um das gesamte Dokument bei jeder DOM-Manipulation zu animieren. Im nächsten Abschnitt lernen wir, wie man bestimmte Elemente gezielt anspricht.

Mehrfache Übergänge

Standardmäßig animieren View Transitions das gesamte Dokument und fügen ein ::view-transition Overlay hinzu. Da wir nicht möchten, dass Benutzer auf jeden Übergang warten müssen, können wir das Wurzelelement von Übergängen ausschließen und weitere Zeiger-Interaktionen ermöglichen.

:root {
  view-transition-name: none;
}

::view-transition {
  pointer-events: none;
}

Die CSS-Eigenschaft view-transition-name muss für jedes zu animierende Element einzigartig sein. Während dies für einzelne und/oder einzigartige Elemente auf einer Seite hervorragend funktioniert, wird es etwas komplexer, wenn man es mit mehreren Elementen des gleichen Typs zu tun hat.

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

::view-transition-old(article-41),
::view-transition-old(article-42),
::view-transition-old(article-43) {
  animation: 150ms ease-out both fade-out;
}

::view-transition-new(article-41),
::view-transition-new(article-42),
::view-transition-new(article-43) {
  animation: 150ms ease-in 150ms both fade-in;
}

Stattdessen können wir view-transition-class verwenden, um den Übergang auf alle Elemente mit der gleichen Klasse anzuwenden, anstatt die Eigenschaften für jeden eindeutigen Namen zu wiederholen. Das obige Beispiel kann somit auf folgende Selektoren reduziert werden:

main > article {
  view-transition-class: article;
}

::view-transition-old(.article) {
  animation: 150ms ease-out both fade-out;
}

::view-transition-new(.article) {
  animation: 150ms ease-in 150ms both fade-in;
}

Als Nächstes

Im nächsten Artikel werden wir dokumentübergreifende View Transitions untersuchen und zeigen, wie Multi-Page-Anwendungen von der View Transition API profitieren können. Wir werden behandeln, wie du die Übergänge einrichtest und wie du sie anpassen kannst, um ein verbessertes Erlebnis für Benutzer über verschiedene Browser hinweg zu schaffen.

TL:DR

Erfahre, wie du die View Transition API nutzen kannst, um geschmeidige Animationen für nahtlose Ansichtsübergänge in deinen Webanwendungen zu erstellen. Dieser Artikel behandelt die Einrichtung von Fallbacks für nicht unterstützte Browser und die Anpassung von Übergängen für ein oder mehrere Elemente mit CSS.