@view-transition
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Die @view-transition CSS At-Regel wird verwendet, um das aktuelle und das Zieldokument bei einer Ansichtstransition für eine Navigation zwischen Dokumenten anzumelden.
Damit eine Ansichtstransition 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 Verhalten der Ansichtstransition des Dokuments angibt. Mögliche Werte sind:
auto-
Das Dokument wird einer Ansichtstransition unterzogen, wenn es an einer Navigation teilnimmt, sofern die Navigation same-origin ist, keine Cross-Origin-Redirects enthält und deren
navigationTypetraverse,pushoderreplaceist. Im Fall vonpushoderreplacemuss die Navigation durch eine Benutzerinteraktion mit dem Seiteninhalt initiiert werden, nicht durch eine Funktion der Browser-Oberfläche. none-
Das Dokument wird keiner Ansichtstransition unterzogen.
types-
Gibt die Typen der Ansichtstransition an, die für die aktive Ansichtstransition des aktuellen und Zieldokuments festgelegt werden sollen. Mögliche Werte sind:
<custom-ident>+-
Eines oder mehrere durch Leerzeichen getrennte
<custom-ident>-Werte, die die festzulegenden Typen darstellen. none-
Es werden keine Typen festgelegt.
Formale Syntax
@view-transition =
@view-transition { <declaration-list> }
Beispiele
Seitenübergang
Die folgenden Codebeispiele zeigen wichtige Konzepte, die in einer Demo zum Seitenübergang verwendet werden. Die Demo nutzt Übergänge zwischen Dokumenten; ein halbe Sekunde dauerender Übergang, der beim Navigieren zwischen zwei Seiten einer Website auftritt. Für die komplette Demo, siehe die View transitions multi-page app demo.
Die @view-transition At-Regel ist im CSS sowohl für Ihr aktuelles als auch für Ihr Zieldokument einer Navigation angegeben, um beide für die Ansichtstransition anzumelden:
@view-transition {
navigation: auto;
}
Zusätzlich zur @view-transition At-Regel verwenden wir die @keyframes At-Regel, um zwei Keyframe-Animationen zu definieren, und nutzen die Kürzungs-Eigenschaft animation, um diese Keyframe-Animationen auf die Elemente der ausgehenden (::view-transition-old()) und eingehenden (::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 sich diese transitions multi-page app Demo live an.
Verwendung von Ansichtstransitionstypen
Unser MPA transition types example (Quellcode) demonstriert, wie types über @view-transition verwendet wird:
@view-transition {
navigation: auto;
types: slide;
}
Sehen Sie sich Using types with cross-document view transitions via @view-transition für eine ausführliche Erläuterung des referenzierten Beispiels an.
Spezifikationen
| Spezifikation |
|---|
| CSS View Transitions Module Level 2 # view-transition-rule |