`:active-view-transition` - Sélecteur CSS

:active-view-transition

Résumé des caractéristiques du sélecteur `:active-view-transition`

Description rapide

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

Statut

Standard

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 pseudo-classe `:active-view-transition`.

La pseudo-classe :active-view-transition est un sélecteur qui cible la racine de la page (l'élément root) pendant le temps d'une transition d'affichage. Lorsque la transition est terminée, :active-view-transition ne cible plus rien du tout.

La pseudo-classe :active-view-transition-type() fait la même chose mais pour un type d'animation particulier, qui sera à indiquer dans les parenthèses. Le type d'animation est fixé par le code Javascript dans le cas d'un transition d'affichage interne à la page, ou par la directive @view-transition dans le cas d'une transition d'affichage entre pages.

Exemple de code Javascript pour déclencher une transition d'affichage interne à la page :


	document.startViewTransition({
	   update:() => traitement(),
	   types:['demo-type']
	});

Exemple de directive @view-transition pour déclencher une transition d'affichage entre deux pages (Cross Document View Transition) :


	@view-transition {
	   navigation:auto;
	   types:demo-type;
	}

Utilisation de la pseudo-classe :active-view-transition-type() :


	:active-view-transition-type(demo-type) {  
	   ...
	}

Rappel.

Une transition d'affichage (View Transition) consiste à passer d'un état à un autre, avec un effet visuel défini à partir d'une animation. Voyez l'exemple ci-dessous.

Sans transition d'affichage
La nouvelle image remplace "brutalement" la précédente (cliquez sur l'image).

Avec transition d'affichage
Un effet visuel est utilisé pour passer d'une image à l'autre (cliquez sur l'image).

Une présentation plus complète des transitions d'affichage est consultable sur cette page : 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-old() :

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

::view-transition-new() :

Cible la copie d'écran du nouvel état, 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.

Exemple d'utilisation de la pseudo-classe `:active-view-transition`.

Dans tous les exemples qui suivent, c'est la pseudo-classe :active-view-transition-type() qui a été utilisée, afin de pouvoir distinguer les exemples entre-eux.

Avec transition d'affichage
Dans cet exemple, la pseudo-classe :active-view-transition-type() est utilisée pour flouter la page pendant le temps de l'animation de transition.

Avec transition d'affichage
La pseudo-classe :active-view-transition-type(), combinée avec l'identifiant de l'image, est utilisée pour afficher un contour autour de l'image pendant le temps de l'animation
(cliquez sur l'image)