Übergänge für Apps mit nur einer Seite ansehen

Bei Webseiten ist es üblich, dass JavaScript verwendet wird, um den Inhalt einer Seite dynamisch zu ersetzen, ohne ein neues, vollständiges HTML-Dokument zu laden. Dies wird als Single-Page-Anwendung (SPA) bezeichnet. Mit Ansichtsübergängen können Sie Kontinuität oder Kontext zwischen den Seiten in Ihrer SPA herstellen.

Übergänge für die ganze Seite

Wenn Ihr Nutzer in Ihrer SPA zu einer neuen Ansicht wechselt, ersetzt Ihr Framework das DOM durch neue Inhalte. So wird der Inhalt einfach angezeigt. Was aber, wenn Sie einen Übergang zwischen dem aktuellen und dem neuen Inhalt einfügen möchten?

Bei Übergängen werden oft sowohl die alte als auch die neue Ansicht gleichzeitig angezeigt, z. B. wird die alte Ansicht ausgeblendet, während die neue Ansicht eingeblendet wird. Da vorhandene Inhalte ersetzt werden, war das vor Ansichtsübergängen eine Herausforderung.

Wenn Sie Ansichtsübergänge verwenden möchten, müssen Sie die Logik zum Ändern des DOM in einen Callback einfügen. Für diese Beispiele haben wir eine einfache Router-Implementierung, die von einer Webkomponente namens MyRouter bereitgestellt wird. Wie Sie Ansichtsübergänge aktivieren, hängt vom verwendeten Router und Framework ab.

document.startViewTransition(() => updateTheDOMSomehow());

Dadurch wird der Standardübergang aktiviert, bei dem die alte Ansicht ausgeblendet und die neue Ansicht eingeblendet wird.

Was geschieht hier? Wenn Sie document.startViewTransition() aufrufen, erstellt der Browser einen Snapshot der alten Ansicht. Anschließend wird die Callback-Funktion aufgerufen, die Sie übergeben, um das DOM mit der neuen Ansicht zu aktualisieren (die aber noch nicht angezeigt wird). Wenn die Callback-Funktion abgeschlossen ist, beginnt der Browser mit der Umstellung auf die neuen Inhalte.

// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
  updateTheDOMSomehow();
  return;
} else {
  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Übergang anpassen

Wie Sie im vorherigen Beispiel gesehen haben, wird bei der Standard-Ansichtsübergang die alte Ansicht ausgeblendet und die neue Ansicht eingeblendet. Sie können den Übergang an den Stil Ihrer Website anpassen, indem Sie von Ansichtsübergängen generierte Pseudoelemente gestalten.

Mit ::view-transition-old() können Sie den Übergang beim Verlassen und mit ::view-transition-new() den Übergang beim Eintreten angeben. Sie können auch mit ::view-transition-group() Werte für beide angeben.

In diesem Beispiel wird die alte Ansicht mit dem slide-out-to-left-Übergang ausgeblendet und die neue Ansicht mit dem slide-in-from-right-Übergang eingeblendet. Beide haben eine Dauer von 200 Millisekunden.

::view-transition-group(root){
  animation-duration: 200ms;
}

::view-transition-old(root) {
  animation-name: slide-out-to-left;
}

::view-transition-new(root) {
  animation-name: slide-in-from-right;
}

Unterschiedliche Übergänge je nach Kontext

Je nachdem, was der Nutzer gerade tut, kann es sinnvoll sein, unterschiedliche Übergänge zu verwenden. Wenn beispielsweise beim Klicken auf einen Link auf Ihrer Startseite die neue Ansicht von rechts eingeblendet wird, sollte beim Klicken auf einen Link, der zurück zur Startseite führt, die Startseite von links eingeblendet werden.

Mit der Pseudoklasse :active-view-transition-type() können Sie verschiedene Animationen angeben.

html:active-view-transition-type(forwards) {
  &::view-transition-old(root) {
    animation-name: slide-out-to-left;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-from-right;
  }
}

Sie können dann auswählen, welcher Übergangstyp für die Ansicht beim Aufrufen von document.startViewTransition() verwendet werden soll.

const direction = next === 'home' ? 'backwards' : 'forwards';

document.startViewTransition({
  update: updateTheDOMSomehow,
  types: [direction],
});

Übergänge für bestimmte Elemente

Bisher haben Sie nur eine Übergangseigenschaft auf das Stammelement angewendet, um die gesamte Ansicht zu animieren. Sie können Ansichtsübergänge aber auch verwenden, um bestimmte Teile Ihrer Seiten zu animieren.

Möglicherweise sind in der alten Ansicht Inhalte vorhanden, die mit Inhalten in der neuen Ansicht übereinstimmen. Das kann der Titel des Inhalts oder ein Bild sein. Es könnte sogar ein Thumbnail-Bild in der alten Ansicht und ein Video in der neuen Ansicht sein.

Zuerst müssen Sie mit der view-transition-name-Property angeben, für welche Elemente der Übergang erfolgen soll. Damit Ansichtsübergänge funktionieren, muss für jedes view-transition-name genau ein Element vorhanden sein, bevor Sie document.startViewTransition() aufrufen, und genau ein Element, nachdem der Callback in document.startViewTransition() abgeschlossen ist.

In diesem Beispiel ist ein Musikplayer zu sehen, der das Albumcover, den Titel und den Künstler anzeigt. In einer alternativen Ansicht werden dieselben Inhalte neu angeordnet und Songtexte hinzugefügt.

Im vorherigen Beispiel gibt es genau ein Element für jede der Übergangseigenschaften in der alten und neuen Ansicht. Die Elemente haben sogar dieselben Selektoren. Die Elemente scheinen sich zwischen ihren Größen und Positionen zu bewegen. Die nicht überblendeten Teile der Ansicht werden ein- und ausgeblendet.

Sehen wir uns ein komplexeres Beispiel an. Auf der Startseite eines Blogs werden beispielsweise für jeden Beitrag eine Überschrift und ein Bild angezeigt. Diese sind auch in der Vollansicht eines Blogbeitrags vorhanden. Wenn Sie von der Startseite zu einem bestimmten Beitrag navigieren, kann es sinnvoll sein, den Titel und das Bild an ihren neuen Ort zu verschieben, um Kontext zu liefern.

Dazu muss das Titelelement in der alten Ansicht ein view-transition-name haben, das eindeutig ist, mit dem Titelelement in der neuen Ansicht geteilt wird und in der neuen Ansicht eindeutig ist. Das ist eine Herausforderung, da die Startseite mehrere Überschriften und Bilder enthält und Sie nicht wissen, auf welche der Nutzer klicken wird.

Sie haben zwei Möglichkeiten, das Problem zu beheben. Sie können für jeden Beitrag auf der Startseite ein eindeutiges view-transition-name hinzufügen und dann den Namen auf jeder Beitragsseite abgleichen. Sie können sie anhand der ID eines Beitrags generieren. Alternativ können Sie ein generisches view-transition-name verwenden, aber nur, nachdem der Nutzer auf einen Beitrag geklickt hat und bevor document.startViewTransition() aufgerufen wird.

Übergänge gestalten

Mit View-Übergängen können Sie Nutzer führen und zusätzliche Hinweise zu Ihrer Marke oder zum Kontext geben. Wahrscheinlich werden Sie mehrere Techniken verwenden, um die Übergänge zu finden, die für Ihre Website geeignet sind.

Je nachdem, welchen Effekt Sie erzielen möchten, müssen Sie möglicherweise auch die Elemente oder Animationen anpassen. Im vorherigen Beispiel wurden mehrere Stile angepasst, um die flüssigen Übergänge zu erzielen.

Die Überschrift hat die Regel width: fit-content. Das ist ein nützlicher Stil, wenn Sie Text umstellen, der nicht umgebrochen wird oder in der alten und neuen Ansicht gleich umgebrochen wird. Andernfalls kann es sein, dass der Übergang zwischen Elementen mit unterschiedlichen Breiten erfolgt, was den Übergang weniger flüssig macht.

Das Bild hat in der alten und der neuen Ansicht auch ein anderes Seitenverhältnis. Im Beispiel werden die Animation und das Attribut object-fit so geändert, dass der Übergang flüssig wirkt.

Respektvoller Umgang mit prefers-reduced-motion

Ein häufiger Grund für den Wunsch nach reduzierten Bewegungen ist, dass Vollbildanimationen, wie sie mit Ansichtsübergängen möglich sind, bei Menschen mit vestibulären Bewegungsstörungen zu Beschwerden führen können. Sie können Animationen mit der Media-Anfrage prefers-reduced-motion deaktivieren. Sie können auch alternative Animationen verwenden, die subtiler sind, aber dennoch zeigen, wie Elemente miteinander verbunden sind.

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Wissen testen