@view-transition

Syntaxe

@view-transition {
  navigation: auto | none;
  types: none | <custom-ident>#;
}

Descripteurs

navigation

Un mot-clé définissant 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 à une navigation, à condition que celle-ci soit de même origine, sans redirections inter-origines, et que son navigationType soit traverse, push, ou replace. Dans le cas de push ou replace, 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.

types

Définit les types de transition d'affichage à définir pour la transition d'affichage active des documents actuel et de destination. Les valeurs possibles sont :

<custom-ident>#

Une ou plusieurs valeurs <custom-ident> séparées par des virgules représentant les types à définir.

none

Aucun type n'est défini.

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.

Utiliser les types de transition de vue

Notre exemple de types de transition MPA ^(angl.) (code source ^(angl.)) montre comment utiliser types via @view-transition :

@view-transition {
  navigation: auto;
  types: slide;
}

Voir Utiliser les types avec les transitions d'affichage inter-documents via @view-transition pour un guide pas à pas de l'exemple référencé.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le pseudo-élément ::view-transition
• Le pseudo-élément ::view-transition-new()
• Le pseudo-élément ::view-transition-old()
• Le pseudo-élément ::view-transition-group()
• Le pseudo-élément ::view-transition-image-pair()
• L'API View Transition
• Utiliser les types de transition de vue
• Les règles @ CSS
• Fonctions des règles @ CSS