L'API View Transition : une révolution pour le web ?
Vous aimeriez pouvoir ajouter des animations à votre front-end web afin de proposer une expérience plus fluide à vos utilisateurs mais vous êtes découragés par la complexité de la tâche ? Vous maîtrisez comme personne transitions CSS, keyframes et animations FLIP mais vous en avez marre de gérer les problèmes d'interface et d'accessibilité causés par ces techniques ? Vous développez un site multi-pages full-stack plus traditionnel (rails, express, laravel...) et vous aimeriez améliorer la navigation entre les différentes pages de votre site ?
Pour résoudre tous ces problèmes et plus encore, venez découvrir l'API viewTransition. Grâce à elle, vous pouvez déléguer au navigateur l'essentiel du travail d'animation et réaliser des transitions entre les différents états de votre application devient un jeu d'enfant, même entre des documents HTML différents (🤯) !
Au programme, je montrerai comment fonctionne cette API et quelles sont les meilleures pratiques pour l'utiliser dans tous les contextes. Nous verrons ensemble que l'API viewTransition permet de dépasser des obstacles jusqu'ici infranchissables dans le développement web !
Fun fact : à 7:12 mon ordinateur redémarre de force alors que je viens de refuser une mise à jour de l’OS, j’ai dû donner la majeure partie de la présentation sur l’ordinateur d’un spectateur (merci à lui !).
Liens utiles
- Applications de démo: SPA/MPA
- Dépôts GitHub: SPA/MPA
- Chrome for developers - Same-document view transitions for single-page applications
- MDN - View Transition API
- Jake Archibald - View transitions: Handling aspect ratio changes
- Matt Perry - Revealed: React’s experimental animations API
- Bramus - Articles sur l’API view transitions