Comment créer des animations d'entrée et de sortie pour un composant React à l'aide de Framer Motion

Animer un composant React lorsqu'il entre ou sort de l'écran peut être un défi. En effet, lorsque vous masquez un composant, React le supprime du DOM, ce qui le rend indisponible pour l'animation. Lorsque vous affichez à nouveau le composant, React le rajoute au DOM, ce qui peut entraîner une apparence abrupte sans animation.

Vous pouvez résoudre ce problème avec une bibliothèque d'animation comme Framer Motion.

Qu'est-ce que le mouvement Framer?

Framer Motion est une bibliothèque d'animation prête pour la production pour React. Il fournit une gamme de composants, de crochets, d'images clés et de fonctions d'accélération personnalisées pour créer et contrôler des animations.

L'un des avantages de Framer Motion est qu'il permet de créer facilement des animations fluides et fluides sans avoir besoin d'écrire beaucoup de code JavaScript ou de calculer des calculs pour chaque transition.

Il dispose également d'un système d'événements, que vous pouvez utiliser pour déclencher des animations basées sur l'entrée de l'utilisateur, telles que les clics de bouton et les gestes, créant des interfaces interactives et dynamiques qui se sentent réactives.

Pour montrer comment utiliser Framer Motion dans React, vous allez animer un composant qui entre et sort de l'écran lorsque vous cliquez sur un bouton.

Créer un projet React

Pour créer un projet React, vous devrez installez Node.js et npm (Node Package Manager) sur votre machine si vous ne l'avez pas fait.

Une fois ces dépendances installées, vous pouvez créer un nouveau projet React en utilisant Vite en exécutant la commande yarn vite dans votre terminal.

fil vite

Cette commande créera un nouveau dossier avec tous les fichiers et dépendances nécessaires préinstallés. Accédez au dossier et démarrez le serveur de développement avec la commande yarn start.

début de fil

Installation de Framer Motion dans React

Installez Framer Motion en exécutant cette commande :

npm installer framer-motion

Cette commande ajoutera Framer Motion en tant que dépendance à votre projet.

Animer un composant

Pour animer un composant lorsqu'il entre et sort de l'écran dans React à l'aide de Framer Motion, vous devez l'envelopper dans le composant de mouvement.

Le composant de mouvement fournit un ensemble de propriétés pour animer l'entrée et la sortie du composant. Vous pouvez utiliser les accessoires initial, animé et de sortie pour contrôler sa visibilité et sa position.

Pour le voir en action, ajoutez le code suivant en haut de App.jsx pour importer le composant de mouvement depuis framer-motion.

importer { mouvement } depuis"framer-mouvement";

Ensuite, créez le composant que vous souhaitez animer en l'enveloppant avec le composant de mouvement. Cet exemple utilise un élément div, mais vous pouvez utiliser tout autre élément de votre choix, tel que button, li et p, entre autres.

importer { mouvement, AnimatePresence } depuis"framer-mouvement"
fonctionApplication() {
retour (
 <>

 initiale={{ X: -100, opacité: 0 }}
 animer={{ X: 0, opacité: 1 }}
 sortie={{ X: -100, opacité: 0 }}
 >
Envoyé !</p>
 </motion.div>

 </>
 )
}

Le composant motion vous permet d'animer l'élément div contenant le texte "Sent!".

Le initial, animer, et sortie Les propriétés du composant de mouvement définissent les animations d'entrée et de sortie du composant. Lorsque le composant est initialement rendu, il commencera avec une position x de -100 (hors écran à gauche) et une opacité de 0 et deviendra invisible.

La propriété animate définit comment le composant doit s'animer lorsqu'il entre dans l'écran, dans ce cas en passant d'un x position de -100 à une position x de 0 (glissant à partir de la gauche) et se fondant progressivement dans une opacité de 1 et devenant complètement visible.

Enfin, la propriété exit définit la manière dont le composant doit s'animer lorsque vous le supprimez de l'écran. Dans ce cas, le composant glissera de l'écran vers la gauche avec une position x de -100 et s'estompera progressivement jusqu'à une opacité de 0.

Vous devez également envelopper le composant de mouvement avec le composant AnimatePresence de framer-motion pour animer les composants lorsque vous les supprimez de l'arborescence React DOM.

Maintenant que vous avez défini les animations d'entrée et de sortie, vous pouvez ajouter un bouton pour déclencher l'animation. Voici le composant modifié avec le bouton :

importer { AnimerPrésence, mouvement } depuis"framer-mouvement";
importer { useState } depuis"réagir";
fonctionApplication() {
constante [isVisible, setIsVisible] = useState(vrai);
constante toggleVisibility = () => {
 setEstVisible(!EstVisible);
 };
retour (
 <>

 {est visible && ( <motion.div
 initiale={{ X: -100, opacité: 0 }}
 animer={{ X: 0, opacité: 1 }}
 sortie={{ X: -100, opacité: 0 }}
 >
Envoyé !</p>
 </motion.div>)}
 </AnimatePresence>

 Notifier
 </button>
 </>
 )
}

Ce code mis à jour ajoute une variable d'état appelée isVisible à l'aide du crochet useState. Cette variable détermine si le composant doit être visible. La fonction toggleVisibility fait basculer la valeur de isVisible entre true et false lorsque vous cliquez sur le bouton.

Tu es maintenant rendu conditionnel du composant en fonction de la valeur de isVisible. Si isVisible est vrai, le composant de mouvement sera rendu avec l'animation d'entrée.

Enfin, ajoutez un gestionnaire d'événements onClick au bouton qui appelle la fonction toggleVisibility, met à jour l'état de isVisible et déclenche l'animation d'entrée ou de sortie du composant de mouvement.

Ajout d'une fonction d'accélération

Une fonction d'accélération contrôle le taux de variation de l'animation dans le temps. Il définit le minutage d'une animation en spécifiant comment l'animation doit accélérer ou ralentir au fur et à mesure de sa progression. Sans fonction d'accélération, l'animation peut s'afficher trop rapidement.

Framer Motion propose plusieurs fonctions d'accélération parmi lesquelles choisir, y compris easyInOut. Importez-le en haut de App.jsx depuis framer-motion pour l'utiliser.

importer { mouvement, facilitéInOut } depuis"framer-mouvement";

Ajoutez-le ensuite à l'objet de transition dans le composant de mouvement :

 initiale={{ X: -100, opacité: 0 }}
 animer={{ X: 0, opacité: 1, transition: { durée: 0.5, faciliter: easyInOut } }}
 sortie={{ X: -100, opacité: 0, transition: { durée: 0.5, faciliter: easyInOut } }}
>
Envoyé !</p>
</motion.div>

La propriété duration spécifie la durée d'exécution de l'animation.

Utiliser le CSS simple pour des animations simples

Il y a tellement plus que vous pouvez faire avec Framer Motion, y compris l'animation 3D. Cependant, vous n'avez pas toujours besoin d'une bibliothèque pour créer des animations. Pour les animations simples telles que les transitions de survol, vous pouvez toujours utiliser du CSS simple.