L'API viewTransition : une révolution pour le web ?

Théo Gianella 28/11/2025

Calendar UI interaction animation by Daniel Tan and Daphnie Loong

Classmo – Virtual Classroom UI/UX by Daniel Tan and Daphnie Loong

iPhoneX – Todo concept by Jae-seong Jeong

Confused Lady Math Lady GIFfrom Confused Lady GIFs

🤷

✨ L'API viewTransition ✨

Une API du navigateur
Permet des transitions entre les vues de votre application
Fonctionne à l'aide d'animations CSS

SPA

Single-page application

Un seul document HTML
Contenu rempli côté-client
React, Vue, etc.

MPA

Multi-page application

Plusieurs documents HTML
Contenu généré côté-serveur
Express, Rails, etc.

Ca ressemble à quoi ? 👀

Pourquoi ça change tout ?

Plus simple à prendre en main
Accessible par défaut
Impossible en cross-document avant ça 🤯

Comment ça fonctionne

Au déclenchement de la transition :

Le rendu graphique est interrompu
Capture de l'état initial
Exécution de la modification du DOM
Animation entre l'état initial et l'état actuel

Captures du DOM

HTML

<div class="cards-list">
	<div class="card" style="background: #E59292;"></div>
	<div class="card" style="background: #CCE592;"></div>
	<div class="card" style="background: #92D7E5;"></div>
	<div class="card" style="background: #92E5C5;"></div>
	<div class="card" style="background: #DA92E5;"></div>
	<div class="card" style="background: #A192E5;"></div>
	<div class="card" style="background: #E5B692;"></div>
	<div class="card" style="background: #92E592;"></div>
</div>

HTML

<div class="feature-list">
	<div class="card feature" style="background: #E59292;"></div>
	<div class="card" style="background: #CCE592;"></div>
	<div class="card" style="background: #92D7E5;"></div>
	<div class="card" style="background: #92E5C5;"></div>
	<div class="card" style="background: #DA92E5;"></div>
</div>

Utiliser la viewTransition en SPA

javascript

document.startViewTransition(() => {
  // Update the DOM somehow.
});

Un arbre de pseudo-éléments

CSS

<html>
	::view-transition
	└── ::view-transition-group(root)
			└── ::view-transition-image-pair(root)
					├── ::view-transition-old(root)
					└── ::view-transition-new(root)
	...
</html>

Personnaliser les animations

CSS

::view-transition-old(root) {
	animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
	300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
	animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
	300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

view-transition-name

css

header {
	view-transition-name: header;
}

: : view-transition-group

CSS

::view-transition
├── ::view-transition-group(root)
│   └── ...
└── ::view-transition-group(header)
    └── ...

Un nom = un élément

jsx

<div
	className="card"
	style={{ viewTransitionName:`card-${color}` }}>
</div>

Quelques conseils...

Jamais plus d'un élément avec le même view-transition-name
Mieux vaut utiliser des id uniques que des index
Appliquer la propriété avant la transition et nettoyer après

L'objet ViewTransition

javascript

const showProduct = () => {
	setupViewTransitionNames();

	const transition = document.startViewTransition(updateTheDOM);

	transition.finished.then(() => {
		removeViewTransitionNames();
	};
});

Un nom = un élément

(mais pas nécessairement le même avant et après)

jsx

<div
	className="card feature"
	style={{ viewTransitionName:`card-${color}` }}>
</div>

Work in progress

Amélioration progressive

javascript

if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
}

const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
});

Niveau	Statut	Contenu
Level 1	Candidate Recommendation	SPA
Level 2	Working draft	MPA + améliorations

Utiliser la viewTransition en MPA

CSS

@view-transition {
  navigation: auto;
}

Bilan & perspectives

Frameworks

Perspectives

Une API puissante et très flexible
Des améliorations de DX sont ajoutées
L'expérience des MPA se rapproche des SPA ?
Une API bas-niveau sur laquelle les frameworks vont fournir des abstractions ?

Théo Gianella

Développeur front-end