@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 sowohl das aktuelle als auch das Zieldokument für eine View-Transition bei einer Navigation zwischen Dokumenten zu aktivieren.

Damit eine View-Transition zwischen Dokumenten funktioniert, müssen sich das aktuelle und das Zieldokument der Navigation ebenfalls auf demselben Ursprung befinden.

Syntax

css
@view-transition {
  navigation: auto;
}

Deskriptoren

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

  • auto: Das Dokument führt eine View-Transition durch, wenn es Teil einer Navigation ist, 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 führt keine View-Transition durch.

Formale Syntax

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

Beispiele

Übergang der Seitenansicht

Die folgenden Codebeispiele zeigen Schlüsselkonzepte, die in einer Demo zu Seitenübergängen verwendet werden. Die Demo nutzt View-Transitions zwischen Dokumenten: ein halbe Sekunde dauernder Übergang, der beim Navigieren zwischen zwei Seiten einer Website auftritt. Für die vollständige Demo, siehe View transitions multi-page app demo.

Die At-Regel @view-transition wird sowohl im CSS für das aktuelle als auch im CSS für das Zieldokument der Navigation angegeben, um beide für die View-Transition zu aktivieren:

css
@view-transition {
  navigation: auto;
}

Zusätzlich zur At-Regel @view-transition verwenden wir die @keyframes-At-Regel, um zwei Keyframe-Animationen zu definieren, und die Kurzform-Eigenschaft animation, um diese Keyframe-Animationen auf die Elemente der Ausgangsseite (::view-transition-old()) und der Zielseite (::view-transition-new()) anzuwenden, die wir animieren wollen.

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