PC & Mobile

Comment animer des transitions de page dans Gatsby.js – freeCodeCamp.org

Comment animer des transitions de page dans Gatsby.js - freeCodeCamp.org


bannière d'Artur Didenko

J’apprécie totalement Gatsby pour diverses raisons. Dans cet article, je souhaite expliquer à quel point il est facile d’ajouter des transitions de page personnalisées à votre site Web pour le rendre plus performant. animé et lisse.

Nous utiliserons Gatsby default starter pour rendre cet exemple aussi isolé que possible, mais vous pouvez être sûr qu'il fonctionnera également pour des démarreurs plus complexes et des projets que vous avez créés à partir de zéro.

En tant que teaser, nous allons construire quelque chose de similaire à ce que vous voyez lorsque vous suivez les liens sur ce site. 😃

Commencer

Si vous débutez dans Gatsby et souhaitez suivre ce didacticiel, veillez à installer l’interface de ligne de commande de Gatsby (interface de ligne de commande Gatsby) afin de pouvoir démarrer rapidement de nouveaux projets.

npm installer --global gatsby-cli

Accédez au dossier de votre projet et créez un nouveau projet Gatsby à l'intérieur en exécutant la commande suivante dans le terminal:

Gatsby nouveau.

Il créera un projet avec la configuration la plus simple possible et devrait ressembler à ceci: (cela peut varier en raison de nouvelles itérations sur la conception du démarreur)

Gatsby-default-starter

Installation des dépendances nécessaires

Tout d’abord, nous devons installer react-transition-group, qui est responsable de la surveillance des éléments entrant dans le DOM et sortant de celui-ci, et de leur appliquer des animations.

npm installer react-transition-group

Nous installerons également gatsby-plugin-layout qui, dans notre cas, fournit la propriété d’emplacement requise pour que les transitions fonctionnent et injecte notre présentation à chaque page.

npm installez gatsby-plugin-layout

Pour que le plugin fonctionne comme prévu, nous devons déplacer notre composant de présentation dans le dossier des présentations à la racine de notre projet et le renommer en index.js. Ajoutons aussi transition.js dans notre dossier de composants où nous fournirons toute la logique de transition. Pour l'instant laissez-le vide car nous avons un peu plus à configurer.

La dernière étape consiste à ajouter notre gatsby-plugin-layout à notre gatsby-config.js fichier situé à la racine de notre projet

Composante de transition 🎩

Cela contient toute la logique de la transition qui sera appliquée lorsqu'un utilisateur décide de suivre un lien vers une autre page de notre site.

À l'intérieur transition.js ajoutez le code suivant que je vais expliquer dans les commentaires:

transition.js

Maintenant, nous pouvons importer le Transition composant dans le composant Mise en page et envelopper les enfants qui représentent nos pages à l'intérieur de celui-ci.

layout.js

À ce stade, vous pouvez rencontrer un bogue lorsque certains éléments de votre page sont rendus deux fois. Pour résoudre ce problème, il suffit de parcourir les fichiers de la des pages dossier et assurez-vous qu'ils n'importent pas le composant et l'utiliser dans l'instruction de retour.

Jerky animation que nous voulons résoudre

Maintenant que tout fonctionne comme prévu et que vous appréciez les transitions de page que vous venez d'ajouter, vous remarquerez peut-être un léger bogue saccadé qui apparaît lorsque votre page est déroulée et que l'animation démarre. Notez que cela se produit lorsqu'il y a plus de contenu sur la page et que vous pouvez faire défiler.

Nous pouvons facilement résoudre ce problème à l’aide d’inclure le code ci-dessous dans notre gatsby-browser.js que vous pouvez trouver à la racine de notre projet. Ce que nous faisons ici est en fait de définir un délai d’animation et d’attendre son exécution jusqu’à ce que la page défile vers le haut.

browser.js

Sur votre site Web, cela devrait ressembler à ceci

J'espère que vous avez apprécié ce petit message et que vous utiliserez vos nouvelles connaissances chaque fois que vous en aurez besoin. Ici vous pouvez trouver un lien vers le dépôt GitHub avec le code de travail pour ce tutoriel. S'abonner à moi sur twitter ne manquez pas un prochain post sur Gatsby.js et des choses amusantes à faire avec!

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close