@view-transition

Limited availability

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

Die @view-transition CSS At-Regel wird verwendet, um das aktuelle und das Zieldokument für einen View-Übergang im Falle einer Navigation zwischen Dokumenten zu aktivieren.

Damit ein View-Übergang zwischen Dokumenten funktioniert, müssen das aktuelle und das Zieldokument der Navigation auch denselben Ursprung haben.

Syntax

css
@view-transition {
  navigation: auto;
}

Deskriptoren

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

  • auto: Das Dokument wird einen View-Übergang durchlaufen, wenn es an einer Navigation teilnimmt, vorausgesetzt die Navigation ist gleichursprünglich, ohne Cross-Origin-Weiterleitungen, und ihr navigationType ist traverse, push oder replace. Im Fall von push oder replace muss die Navigation durch eine Benutzerinteraktion mit dem Seiteninhalt initiiert werden, nicht durch eine Funktion der Browser-Benutzeroberfläche.

  • none: Das Dokument wird keinen View-Übergang durchlaufen.

Formale Syntax

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

Beispiele

Übergang des Seiten-View

Die folgenden Codebeispiele zeigen die Schlüsselkonzepte, die in einem Demo für Seitenübergänge verwendet werden. Das Demo nutzt Übergänge zwischen Dokumenten; ein halbe Sekunde dauernder Übergang, der beim Navigieren zwischen zwei Seiten einer Website auftritt. Für das vollständige Demo siehe das View-Übergänge Mehrseiten-App-Demo.

Die @view-transition At-Regel wird im CSS sowohl für Ihre aktuellen als auch für die Zieldokumente einer Navigation spezifiziert, um beide in den View-Übergang einzubeziehen:

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 der 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 dieses Transitions Mehrseiten-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