Animer vos transitions de page facilement avec Nuxt.js et Vue.js

14 août 2017

Vue.js dispose d’un composant transition très pratique pour créer des animations css (ou JavaScript) lorsqu’un composant apparait ou disparait. Ce qui nous permet de créer très facilement avec Nuxt.js des effets de transition pour nos pages. Exemple avec un effet de slide utilisé en ce moment sur ce site (si vous êtes sur un écran de largeur “desktop”) (je l’ai enlevé, il reste un très léger effet de fade in / fade out actuellement, pour adoucir les changements de page )

Le composant transition de Vue.js ajoute automatiquement des classes css à un composant pendant qu’il apparait ou disparait. Un bon dessin vaut mieux qu’une longue explication pour comprendre les moments d’apparition et de disparition de ces classes :

vuejs-transition-components-classes.png

Pour activer ces classes de transitions sur nos pages Nuxt (qui sont des composants Vue.js), il suffit d’ajouter une clef transition comme ci-dessous :

https://gist.github.com/nyl-auster/445b557a17197e3c6771af5c0554e439

Ici je nomme ma transition page, donc mes classes css d’entrée et de sortie de composants seront toutes préfixés par page- : page-enter, page-enter-to, page-enter-active etc …

Plus qu’à accrocher à ces classes le css que l’on souhaite pour créer un effet de transition, ici un effet de slide : la page actuelle disparait en fade-out et la nouvelle page arrive en slide par la gauche.

https://gist.github.com/nyl-auster/7daf76e448955612b3578be526d4ccd7

On peut aller beaucoup plus loin dans la gestion des transitions avec Vue.js, je vous renvoie à la documentation pour découvrir tout ce qu’il est possible de faire avec le composant “transition”.