@view-transition
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
La règle @ CSS @view-transition est utilisée pour choisir les documents actuels et de destination qui subiront une transition d'affichage, dans le cas d'une navigation entre plusieurs documents.
Pour qu'une transition entre documents fonctionne, les documents — actuel et cible — de la navigation doivent également provenir de la même origine.
Syntaxe
@view-transition {
navigation: auto;
}
Descripteurs
-
Spécifie l'effet que cette règle @ aura sur le comportement de transition d'affichage du document. Les valeurs possibles sont :
-
auto: Le document subira une transition d'affichage lorsqu'il prendra part à la navigation, à condition que celle-ci soit d'une même origine, sans redirection inter-origines, et que sonnavigationTypesoittraverse,push, oureplace. Dans le cas depushoureplace, la navigation doit être initiée par un·e utilisateur·ice interagissant avec le contenu de la page, et non par une fonctionnalité de l'interface utilisateur du navigateur. -
none: Le document ne subira pas de transition d'affichage.
-
Syntaxe formelle
@view-transition =
@view-transition { <declaration-list> }
Exemples
Affichage de la page de transition
Les extraits de code suivants affichent des concepts clés utilisés dans une démo de transition de page. La démo utilise des transitions de vue transversale ; une demi-deuxième transition qui se produit lors de la navigation entre deux pages d'un site. Pour la démo complète, voir le Afficher la démonstration de l'application multipages avec transitions.
La règle @view-transition est spécifiée dans le CSS pour vos documents actuels et de destination d'une navigation afin de les inclure tous les deux dans la transition d'affichage :
@view-transition {
navigation: auto;
}
En plus de @view-transition, nous utilisons la règle @keyframes pour définir deux animations d'images clés et utilisons la propriété abrégée animation pour appliquer ces animations d'images clés aux éléments des pages sortantes (::view-transition-old()) et entrantes (::view-transition-new()) que nous voulons animer.
/* Créer une animation personnalisée */
@keyframes move-out {
from {
transform: translateY(0%);
}
to {
transform: translateY(-100%);
}
}
@keyframes move-in {
from {
transform: translateY(100%);
}
to {
transform: translateY(0%);
}
}
/* Appliquer l'animation personnalisée aux anciens et nouveaux états de page */
::view-transition-old(root) {
animation: 0.4s ease-in both move-out;
}
::view-transition-new(root) {
animation: 0.4s ease-in both move-in;
}
Voir la démonstration de l'application multipages avec transitions.
Spécifications
| Specification |
|---|
| CSS View Transitions Module Level 2 # view-transition-rule |
Compatibilité des navigateurs
Loading…