@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 Ziel-Dokument für eine View Transition im Falle einer dokumentübergreifenden Navigation einzuschalten.

Damit eine dokumentübergreifende View Transition funktioniert, müssen sowohl das aktuelle als auch das Ziel-Dokument der Navigation demselben Ursprung angehören.

Syntax

css
@view-transition {
  navigation: auto;
}

Deskriptoren

Bestimmt den Effekt, den diese At-Regel auf das Verhalten der View Transition des Dokuments hat. Mögliche Werte sind:

  • auto: Das Dokument wird eine View Transition durchlaufen, wenn es Teil einer Navigation ist, vorausgesetzt, die Navigation ist gleich-origin, 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 Browser-Benutzeroberflächenfunktion.

  • none: Das Dokument wird keine View Transition durchlaufen.

Formale Syntax

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

Beispiele

Seitenansicht wechseln

Die folgenden Code-Beispiele zeigen Schlüsselkonzepte, die in einem Seitentransitions-Demo verwendet werden. Das Demo nutzt dokumentübergreifende View Transitions; eine halbe Sekunde dauernde Transition, die beim Navigieren zwischen zwei Seiten einer Website auftritt. Für das vollständige Demo siehe die View Transitions Multi-Page App Demo.

Die @view-transition At-Regel wird im CSS sowohl für Ihr aktuelles als auch für Ihr Ziel-Dokument einer Navigation angegeben, um beide für die View Transition einzuschalten:

css
@view-transition {
  navigation: auto;
}

Zusätzlich zur @view-transition At-Regel verwenden wir die @keyframes At-Regel, um zwei Keyframe-Animationen zu definieren 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 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