@view-transition
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
Die @view-transition
CSS At-Regel wird verwendet, um das aktuelle und das Ziel-Dokument für einen Ansichtsübergang im Falle einer Navigation über Dokumentengrenzen hinweg anzumelden.
Damit ein Ansichtsübergang zwischen Dokumenten funktioniert, müssen das aktuelle und das Zieldokument der Navigation ebenfalls aus demselben Ursprung stammen.
Syntax
@view-transition {
navigation: auto;
}
Deskriptoren
-
Gibt an, welche Wirkung diese At-Regel auf das Verhalten des Ansichtsübergangs des Dokuments hat. Mögliche Werte sind:
-
auto
: Das Dokument wird einen Ansichtsübergang durchlaufen, wenn es an einer Navigation beteiligt ist, vorausgesetzt, die Navigation ist gleich-origin, ohne ursprungsübergreifende Weiterleitungen, und ihrnavigationType
isttraverse
,push
oderreplace
. Im Falle vonpush
oderreplace
muss die Navigation durch eine Benutzerinteraktion mit dem Seiteninhalt initiiert werden, nicht durch eine Browser-Oberflächenfunktion. -
none
: Das Dokument wird keinen Ansichtsübergang durchlaufen.
-
Formale Syntax
@view-transition =
@view-transition { <declaration-list> }
Beispiele
Übergang der Seitenansicht
Die folgenden Codebeispiele zeigen die wichtigsten Konzepte, die in einer Seitenübergangs-Demo verwendet werden. Die Demo verwendet Dokumenten-übergreifende Ansichtsübergänge; einen halben Sekundenübergang, der auftritt, wenn zwischen zwei Seiten einer Website navigiert wird. Für die vollständige Demo siehe das View Transitions Multi-Page App Demo.
Die @view-transition
At-Regel wird im CSS sowohl für Ihre aktuellen als auch Ziel-Dokumente einer Navigation angegeben, um beide in den Ansichtsübergang einzubinden:
@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 in den 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.
Spezifikationen
Specification |
---|
CSS View Transitions Module Level 2 # view-transition-rule |
Browser-Kompatibilität
BCD tables only load in the browser