@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 zu aktivieren, im Fall einer Navigation zwischen Dokumenten.
Damit ein View-Übergang zwischen Dokumenten funktioniert, müssen das aktuelle und das Zieldokument der Navigation denselben Ursprung haben.
Syntax
@view-transition {
navigation: auto | none;
types: none | <custom-ident>#;
}
Deskriptoren
-
Ein Schlüsselwort, das den Effekt dieser At-Regel auf das View-Übergangsverhalten des Dokuments angibt. Mögliche Werte sind:
auto-
Das Dokument wird einen View-Übergang durchlaufen, wenn es an einer Navigation teilnimmt, sofern die Navigation gleicher Ursprung ist, ohne Cross-Origin-Weiterleitungen, und der
navigationTypetraverse,pushoderreplaceist. Im Fall vonpushoderreplacemuss die Navigation durch eine Interaktion des Benutzers mit dem Seiteninhalt und nicht durch ein Browser-UI-Feature initiiert werden. none-
Das Dokument wird keinen View-Übergang durchlaufen.
types-
Gibt die Typen an, die auf den aktiven View-Übergang für das aktuelle und das Zieldokument gesetzt werden sollen. Mögliche Werte sind:
<custom-ident>#-
Einer oder mehrere durch Kommas getrennte
<custom-ident>-Werte, die die zu setzenden Typen darstellen. none-
Es werden keine Typen gesetzt.
Formale Syntax
@view-transition =
@view-transition { <declaration-list> }
Beispiele
Seitenansicht übergang
Die folgenden Codeausschnitte zeigen Schlüsselkonzepte, die in einer Seitenübergangsdemo verwendet werden. Die Demo verwendet Übergänge zwischen Dokumenten; ein halbe Sekunde dauernder Übergang, der beim Navigieren zwischen zwei Seiten einer Website auftritt. Für die vollständige Demo siehe das View-Übergänge Mehrseiten-App-Demo.
Die @view-transition At-Regel wird im CSS für sowohl Ihre aktuellen als auch Ihre Zieldokumente einer Navigation spezifiziert, um beide in den View-Übergang einzubeziehen:
@view-transition {
navigation: auto;
}
Zusätzlich zur @view-transition At-Regel verwenden wir die @keyframes At-Regel, um zwei Schlüsselbild-Animationen zu definieren, und verwenden die animation Kurzform-Eigenschaft, um diese Schlüsselbild-Animationen auf die Elemente in den abgehenden (::view-transition-old()) und ankommenden (::view-transition-new()) Seiten anzuwenden, die wir animieren möchten.
/* 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 diese Übergänge Mehrseiten-App-Demo live.
Verwendung von View-Übergangstypen
Unser MPA-Übergangstypen-Beispiel (Quellcode) demonstriert, wie types über @view-transition verwendet wird:
@view-transition {
navigation: auto;
types: slide;
}
Siehe Verwendung von Typen mit Übergängen zwischen Dokumenten über @view-transition für eine detaillierte Anleitung des referenzierten Beispiels.
Spezifikationen
| Specification |
|---|
| CSS View Transitions Module Level 2 # view-transition-rule |