`@view-transition` - Directive CSS

@view-transition

Résumé des caractéristiques de la directive `@view-transition`

Description rapide

Active ou désactive les transitions d'affichage entre les pages. Ces transitions permettent des effets tels que les fondus, le glissement, etc.

Statut

Standard

Utilisable sur

HTML

Module W3C

Module CSS - Transitions d'afichage

Références (W3C)

CSS View Transitions Module Level 2

Statut du document: WD (document de travail)

Description de la directive `@view-transition`.

La directive @view-transition active les transitions d'affichage entre deux pages (Cross Document View Transition). Lorsque les pages comportent cette directive dans leurs styles, le passage d'une page à l'autre se fait avec une animation : effet de fondu, défilement, etc.

Attention ! Les deux pages doivent provenir du même domaine.

Un exemple de ce qu'il est possible d'obtenir est visible en cliquant sur les liens ci-après. Mais plusieurs navigateurs ne prennent pas encore en charge cette technologie. Cliquez d'abord sur le lien de test pour savoir si le navigateur que vous utilisez est compatible avec les transitions d'affichage : Lien de test - Lien de démonstration.

Remarque : la directive @view-transition peut être incluse dans la directive conditionnelle @media. Ce qui permet de n'activer les transitions que si les capacités du terminal sont suffisantes. Il n'est pas nécessaire de tester la compatibilité du navigateur : si le navigateur n'est pas compatible les transitions ne sont tout simplement pas exécutées, mais le passage d'une page à l'autre n'est pas altéré.

Reportez-vous à notre tutoriel sur les transitions d'affichage pour une présentation générale des transitions d'affichage.

Autres pages en rapport avec les transitions d'affichage.

Sur les transition d'affichage.

view-transition-name :

Associe à l'élément ciblé un identifiant de transition.

::view-transition-new() :

Cible la copie d'écran du nouvel état, dans le cas d'une transition d'affichage.

::view-transition-old() :

Cible la copie d'écran de l'état antérieur, dans le cas d'une transition d'affichage.

view-transition-class :

Permet d'appliquer des styles identiques ç différentes transition d'affichage.

view-transition-group :

Construit une hiérarchie entre les pseudo-éléments relatifs aux transitions d'affichage.

Plusieurs transitions d'affichage sur une même page.

:active-view-transition :

Cible la racine du document, pandant le temps d'une transition d'affichage.

:active-view-transition-type() :

Cible la racine du document, pandant le temps d'une transition d'affichage d'un certain type.

Transitions d'affichage d'un document à l'autre.

@view-transition :

Active ou désactive les transitions d'affichage entre les pages. Ces transitions permettent des effets tels que les fondus, le glissement, etc.

Syntaxe et descripteurs de `@view-transition`.

@view-transition: { navigation: none; }

Le descripteur navigation accepte deux valeurs seulement à l'heure actuelle :
- none : les transitions d'affichage sont désactivées. Le passage d'une page à l'autre se fait sans transition : la nouvelle page remplace simplement la précédente.
- auto : les transitions d'affichage sont activées si les deux pages proviennent du même domaine, et lorsque l'utilisateur clique sur un lien, utilise le bouton de retour arrière, ou sélectionne un favori.
  L'effet de transition voulu est défini sur les pseudo-éléments ::view-transition-old() et ::view-transition-new().
- D'autres valeurs sont annoncées mais non encore standardisées par le W3C.
@view-transition: { types: fondu; }

Le descripteur types définit l'identifiant de la transition. Chaque page peut donc utiliser un effet de transition spécifique. Plusieurs types peuvent être énumérés, en les séparant par des virgules.

Voici un exemple de code complet. Il définit qu'une transition d'affichage doit être effectuée, suivant le type fondu. Ce dernier est défini par une animation sur les pseudo-éléments ::view-transition-old() et ::view-transition-new().
Le terme root indique que les animations seront appliquées à toute la page, et pas seulement à certains éléments.

/* Activation des transitions d'affichage entre pages */ @view-transition {navigation:auto; types:fondu;} /* Définition des animations */ @keyframes fondu-old { from {transform:opacity(100%);} to {transform:opacity(0%);} } @keyframes fondu-new { from {transform:opacity(0%);} to {transform:opacity(100%);} } /* Application des animations aux pseudo-éléments */ :active-view-transition-type(fondu)::view-transition-old(root) { animation:fondu-old 2s; } :active-view-transition-type(fondu)::view-transition-new(root) { animation:fondu-new 2s; }

Présentation des transitions d'affichage.

La technique relativement récente des transitions d'affichage (View Transitions) permet de définir une transition entre deux affichages, au lieu d'un saut brutal d'un affichage à l'autre. Il est possible par exemple de définir un effet de fondu entre deux images.

Voici un exemple pour que vous compreniez tout de suite de quoi nous parlons : un peu de code Javascript permet de retourner les cartes à jouer en cliquant dessus. La première carte se retourne sans effet de transition. La deuxième par contre met en oeuvre une transition d'affichage : un fondu entre l'image de la carte et celle du dos. Bien entendu cela ne marchera que si le navigateur sur lequel vous affichez cette page prend en charge les transitions d'affichage, ce qui est loin d'être garanti. Par exemple, à l'heure actuelle (2024) Firefox ne traite pas cette fonctionnalité.

Pas d'effet de transition

Avec un effet de transition

Le code Javascript en lui-même est très simple : il modifie simplement la source (attribut src) de la balise img. L'élément sur lequel il faut agir (la carte) est passé en paramètre el.


	function turnCard(el) {
		el.src='chemin/image.png';
	}

Pour faire intervenir l'effet de transition il suffit de modifier légèrement le code : appeler le traitement via la méthode startViewTransition().


	function turnCardVT(el) {
	   document.startViewTransition({
	      update:() => turnCard(el),
	      types:['root']
	   });
	}
	
	/* Ou, pour ceux qui n'aiment pas les syntaxes fléchées */
	
	function turnCardVT(el) {
	   document.startViewTransition({
	      update: function() { 
	         turnCard(el);
	      },
	      types:['root']
	   });
	}

On voit donc qu'il est très facile d'obtenir une ergonomie sympathique avec un code très simple. Voici ce que fait le navigateur lorsqu'il réalise une transition d'affichage :

Mémoriser une copie de l'écran initial sous forme d'une image.
Réaliser les modifications demandées.
Mémoriser une copie du nouvel écran, sous forme d'une image également.
Lancer une animation sur l'image de départ et l'image finale.

Les pseudo-éléments `::view-transition-old()` et `::view-transition-new()`.

Ces deux pseudo-éléments ciblent respectivement la copie d'écran avant modification, et la copie d'écran après modification. Et bien entendu ces sélecteurs peuvent être utilisés pour appliquer des styles à ces deux images.
Un exemple très simple est de changer la durée des animations.

Remarque 1 : il faut souvent appliquer les mêmes propriétés aux deux pseudo-éléments pour obtenir un résultat cohérent.
Remarque 2 : le terme root signifie que ces styles s'appliquent à toute la page pendant une transition, et pas seulement à certains éléments.


	::view-transition-old(root) {
	   animation-duration:2s;
	}
	::view-transition-new(root) {
	   animation-duration:2s;
	}

Mais il est possible de faire des choses beaucoup plus sophistiquées, comme par exemple de définir entièrement de nouvelles animations.
Remarque : ces codes vous sont donnés pour le principe. Ils fonctionneraient sur une page comportant une seule transition d'affichage, mais sur cette page qui en comporte de nombreuses, ils devront être complétés comme nous le verrons un peu plus loin.


	@keyframes rotation-old {
	   from {transform:rotate(0deg); opacity:1;}
	   to {transform:rotate(360deg); opacity:0;}
	}
	@keyframes rotation-new {
	   from {transform:rotate(0deg); opacity:0;}
	   to {transform:rotate(360deg); opacity:1;}
	}
	::view-transition-old(root) {
	   animation:rotation-old 1s;
	}
	::view-transition-new(root) {
	   animation:rotation-new 1s;
	}


	@keyframes zoom-old {
	   from {transform:scale(1);}
	   to {transform:scale(0);}
	}
	@keyframes zoom-new {
	   from {transform:scale(0);}
	   to {transform:scale(1);}
	}
	::view-transition-old(root) {
	   animation:zoom-old 1s;
	}
	::view-transition-new(root) {
	   animation:zoom-new 1s;
	}

Très souvent les animations modifient la propriété opacity parce qu'il faut absolument que l'image de l'ancien écran disparaisse pendant que celle du nouvel écran apparaît. Cela se fait en faisant varier leur opacité :

Passage de l'opacité de 1 à 0 sur ::view-transition-old(),
Passage de l'opacité de 1 à 0 sur ::view-transition-new().

La propriété `view-transition-name`.

Par défaut, les animations sont appliquées à toute la page (élément root). Dans le cas d'une transition par fondu, ce n'est pas gênant car les éléments qui ne sont pas modifiés sont remplacés par eux-même : on ne voit rien. Mais d'autres animations ne peuvent pas être appliquées à l'élément root.

La propriété view-transition-name permet d'isoler un élément et d'appliquer les animations sur cet élément seulement, en laissant le reste du document en dehors de l'animation. Cela se fait en associant à un élément un identifiant de transition. On retrouve ensuite cet identifiant dans le paramètre des pseudo-éléments ::view-transition-old() et ::view-transition-new().


	#logo {view-transition-name: demo-name;}
	
	::view-transition-old(demo-name) {
	   ...
	}
	::view-transition-new(demo-name) {
	   ...
	}

Verso

Ici l'animation choisie est une rotation. Par défaut elle s'applique à toute la page

Verso

Le titre et la carte on reçu chacun un identifiant de transition et des animations différentes.

La pseudo-classe `:active-view-transition`.

Cette pseudo classe cible l'élément racine (:root) lorsque une transition d'affichage est en cours. Elle ne cible plus rien une fois la transition terminée. Dans l'exemple ci-dessous nous l'avons utilisée pour flouter la page pendant que la carte se retourne.

Cette pseudo-classe peut bien sûr être combinée avec un autre sélecteur pour ne pas cibler la page entière.

queen
:active-view-transition {filter:blur(5px);}

Plusieurs transitions d'affichage sur la même page.

Par défaut tous les effets de transition de la page sont déclenchés en même temps. Mais il est souvent nécessaire de disposer de plusieurs effets de transition sur une même page. Pour cela il sera nécessaire de :

Associer un nom de transition à chacun des éléments objets d'une transition. C'est le rôle de la propriété view-transition-name.
Sans utilisation de la propriété view-transition-name, le nom par défaut est root.
Identifier le type de transition souhaité dans le code Javascript, avec le paramètre types, et utiliser la pseudo-classe :active-view-transition-type() dans le code CSS.
script function turnCardVT(el) { document.startViewTransition({ update:() => turnCard(el), types:['demo-type'] }); } /script style :active-view-transition-type(demo-type)::view-transition-old(demo-name) { ... } :active-view-transition-type(demo-type)::view-transition-new(demo-name) { ... } /style

queen

En résumé, voici le code nécessaire pour ce dernier exemple, et pour qu'il fonctionne sans interagir avec les autres transitions d'affichage définies sur cette page.


	/* L'appel de la fonction se fait par un click sur la carte */
	/* onclick="turnCardVT(this, 'fondu')" */
	
	script id="tutorial1-js"
	function turnCardVT(el,type) {
		if (document.startViewTransition) {
			document.startViewTransition({
				update:() => turnCard(el),
				types:[type]
			});
		}
		else {
			alert('Navigateur non compatible.');
		}
	}
	function turnCard(el) {
	   if(el.src.indexOf('back')==-1) {
		  el.src='img/@view-transition-back.png';
	   }
	   else {
		  el.src='img/@view-transition-' + el.alt + '.png';
	   }
	}
	/script

	style
	@keyframes fondu-old{
	   from {filter:brightness(100%);}
	   to {filter:brightness(10%);}
	}
	@keyframes fondu-new{
	   from {filter:brightness(10%);}
	   to {filter:brightness(100%);}
	}
	#tutorial5 {view-transition-name:tutorial5;}
	
	:root:active-view-transition-type(fondu)::view-transition-old(tutorial5) {
	   animation:fondu-old 1s;
	}
	:root:active-view-transition-type(fondu)::view-transition-new(tutorial5) {
	   animation:fondu-new 1s;
	}
	/style

Transitions d'affichage entre pages (Cross Document View Transition).

Il est possible, suivant un mécanisme comparable, de définir une transition d'affichage lorsqu'une page en remplace une autre. C'est à dire chaque fois qu'un internaute clique sur un lien, utilise le bouton de retour, ou choisit une page dans les favoris.

La contrainte est que ces deux pages doivent être sur le même domaine.

La solution de base est simple à mettre en oeuvre : les deux pages doivent comporter la directive @view-transition dans leur code CSS. Chacune d'elles doit également définir l'animation à exécuter après le chargement de la page. Si toutes les pages s'affichent avec le même effet, il est courant d'écrire les styles CSS dans un fichier séparé, chacune des pages faisant référence à ce fichier avec une balise link dans leur en-tête.
Voici un exemple de code minimal.


	@view-transition {navigation: auto;}

	@keyframes navigate-old {
	   from {transform:translate(0);}
	   to {transform:translate(100%);}
	}
	@keyframes navigate-new {
	   from {transform:translate(-100%);}
		to {transform:translate(0px);}
	}
	::view-transition-old(root) {
		animation:navigate-old 1s;
	}
	::view-transition-new(root) {
		animation:navigate-new 1s;
	}

Le lien ci-après dirige vers une page qui comporte ce code. Si vous utilisez un navigateur compatible, cela vous permettra d'avoir une idée du résultat : lien de démonstration.

En résumé.

Pour activer une transition d'affichage, il faut un peu de Javascript, avec la fonction startViewTransition().
Pour personnaliser l'animation (par défaut un fondu), voir les pseudo-éléments ::view-transition-old() et ::view-transition-new().
Pour ne pas appliquer l'animation sur toute la page, voir la propriété view-transition-name.
Lorsque plusieurs animations sont définies sur une même page, pour faire en sorte qu'elles ne se déclenchent pas toutes en même temps, voir la pseudo-classe :active-view-transition-type().
Pour définir une transition d'affichage d'une page à l'autre, voir la directive @view-transition.

Prise en charge par les navigateurs (compatibilité).

Colonne 1

Prise en charge des transitions d'affichage sur la page (pas d'une page à l'autre). Correspondant au niveau 1 de la spécification.

Colonne 2

Supporte les transitions d'affichage d'une page à l'autre (niveau 2 de la spécification).

Colonne 3

Prise en charge de la directive @view-transition permettant d'établir une transition entre les pages (niveau 2 de la spécification).

Transitions d'affichage
sur une même page

Transitions d'affichage
d'une page à l'autre

Directive
@view-transition

Estimation de la prise en charge globale.

86%

81%

80%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Chrome

Edge

Firefox

Opéra

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Évolution de la directive `@view-transition`.

Module CSS - Transitions d'afichage - Niveau 2

Le niveau 2 de la spécification introduit la possibilité de définir des transitions d'affichage entre plusieurs documents, grâce à la nouvelle directive @view-transition.

16 Mai 2024
Document de travail.