@view-transition

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die @view-transition CSS At-Regel wird verwendet, um das aktuelle und das Ziel-Dokument für einen Ansichtsübergang im Falle einer Navigation über Dokumentengrenzen hinweg anzumelden.

Damit ein Ansichtsübergang zwischen Dokumenten funktioniert, müssen das aktuelle und das Zieldokument der Navigation ebenfalls aus demselben Ursprung stammen.

Syntax

css
@view-transition {
  navigation: auto;
}

Deskriptoren

Gibt an, welche Wirkung diese At-Regel auf das Verhalten des Ansichtsübergangs des Dokuments hat. Mögliche Werte sind:

  • auto: Das Dokument wird einen Ansichtsübergang durchlaufen, wenn es an einer Navigation beteiligt ist, vorausgesetzt, die Navigation ist gleich-origin, ohne ursprungsübergreifende Weiterleitungen, und ihr navigationType ist traverse, push oder replace. Im Falle von push oder replace muss die Navigation durch eine Benutzerinteraktion mit dem Seiteninhalt initiiert werden, nicht durch eine Browser-Oberflächenfunktion.

  • none: Das Dokument wird keinen Ansichtsübergang durchlaufen.

Formale Syntax

@view-transition = 
  @view-transition { <declaration-list> }

Beispiele

Übergang der Seitenansicht

Die folgenden Codebeispiele zeigen die wichtigsten Konzepte, die in einer Seitenübergangs-Demo verwendet werden. Die Demo verwendet Dokumenten-übergreifende Ansichtsübergänge; einen halben Sekundenübergang, der auftritt, wenn zwischen zwei Seiten einer Website navigiert wird. Für die vollständige Demo siehe das View Transitions Multi-Page App Demo.

Die @view-transition At-Regel wird im CSS sowohl für Ihre aktuellen als auch Ziel-Dokumente einer Navigation angegeben, um beide in den Ansichtsübergang einzubinden:

css
@view-transition {
  navigation: auto;
}

Zusätzlich zur @view-transition At-Regel definieren wir zwei @keyframe-Animationen und verwenden die animation-Kurzschreibweise, um diese Keyframe-Animationen auf die Elemente in den ausgehenden (::view-transition-old()) und eingehenden (::view-transition-new()) Seiten anzuwenden, die wir animieren möchten.

css
/* Create a custom animation */
@keyframes move-out {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes move-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

/* Apply the custom animation to the old and new page states */
::view-transition-old(root) {
  animation: 0.4s ease-in both move-out;
}

::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}

Sehen Sie sich diese Transitions Multi-Page App Demo live an.

Spezifikationen

Specification
CSS View Transitions Module Level 2
# view-transition-rule

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch