Cum se creează animații de intrare și ieșire pentru o componentă React folosind Framer Motion

Animarea unei componente React atunci când intră sau iese de pe ecran poate fi o provocare. Acest lucru se datorează faptului că, atunci când ascundeți o componentă, React o elimină din DOM, ceea ce o face indisponibilă pentru animație. Când afișați din nou componenta, React o adaugă din nou în DOM, ceea ce poate duce la o apariție bruscă fără animație.

Puteți rezolva această problemă cu o bibliotecă de animații precum Framer Motion.

Ce este Framer Motion?

Framer Motion este o bibliotecă de animație pregătită pentru producție pentru React. Oferă o gamă largă de componente, cârlige, cadre cheie și funcții personalizate de relaxare pentru crearea și controlul animațiilor.

Un avantaj al Framer Motion este că facilitează crearea de animații fluide și fluide fără a fi nevoie să scrieți mult cod JavaScript sau să realizați calcule pentru fiecare tranziție.

Are, de asemenea, un sistem de evenimente, pe care îl puteți folosi pentru a declanșa animații bazate pe intrarea utilizatorului, cum ar fi clicuri pe butoane și gesturi, creând interfețe interactive și dinamice care se simt receptive.

Pentru a demonstra cum să utilizați Framer Motion în React, veți anima o componentă care intră și iese din ecran atunci când faceți clic pe un buton.

Crearea unui proiect React

Pentru a crea un proiect React, va trebui instalați Node.js și npm (Manager de pachete Node) pe mașina dvs dacă nu ai.

Odată ce aveți aceste dependențe instalate, puteți creați un nou proiect React folosind Vite rulând comanda yarn vite în terminalul dvs.

yarn vite

Această comandă va crea un folder nou cu toate fișierele și dependențele necesare preinstalate. Navigați la folder și porniți serverul de dezvoltare cu comanda yarn start.

începutul firului

Instalarea Framer Motion în React

Instalați Framer Motion rulând această comandă:

npm instalează framer-motion

Această comandă va adăuga Framer Motion ca dependență la proiectul dvs.

Animarea unei componente

Pentru a anima o componentă pe măsură ce intră și iese din ecran în React folosind Framer Motion, trebuie să o înfășurați în componenta de mișcare.

Componenta de mișcare oferă un set de proprietăți pentru animarea intrării și ieșirii componentei. Puteți folosi elementele de recuzită inițiale, animate și de ieșire pentru a-i controla vizibilitatea și poziția.

Pentru a-l vedea în acțiune, adăugați următorul cod în partea de sus a App.jsx pentru a importa componenta de mișcare din framer-motion.

import { mișcare } din"cadrator-miscare";

Apoi, creați componenta pe care doriți să o animați, împachetând-o cu componenta de mișcare. Acest exemplu folosește un element div, dar puteți folosi orice alt element doriți, cum ar fi butonul, li și p printre altele.

import { mișcare, AnimatePresence } din"cadrator-miscare"
funcţieApp() {
întoarcere (
 <>

 initial={{ X: -100, opacitate: 0 }}
 animat={{ X: 0, opacitate: 1 }}
 ieșire={{ X: -100, opacitate: 0 }}
 >
Trimis!</p>
 </motion.div>

 </>
 )
}

Componenta de mișcare vă permite să animați elementul div care conține textul „Trimis!”.

The iniţială, anima, și Ieșire proprietățile componentei de mișcare definesc animațiile de intrare și ieșire ale componentei. Când componenta este redată inițial, va începe cu o poziție x de -100 (în afara ecranului la stânga) și o opacitate de 0 și va deveni invizibilă.

Proprietatea animate definește modul în care componenta ar trebui să se anime atunci când intră pe ecran, în acest caz, trecând de la un x poziție de -100 până la o poziție x de 0 (alunecând din stânga) și estompând treptat într-o opacitate de 1 și devenind complet vizibil.

În cele din urmă, proprietatea de ieșire definește modul în care ar trebui să se anime componenta atunci când o eliminați de pe ecran. În acest caz, componenta va aluneca de pe ecran spre stânga cu o poziție x de -100 și va disparea treptat până la o opacitate de 0.

De asemenea, trebuie să împachetați componenta de mișcare cu componenta AnimatePresence din framer-motion pentru a anima componente atunci când le eliminați din arborele React DOM.

Acum că ați definit animațiile de intrare și ieșire, puteți adăuga un buton pentru a declanșa animația. Iată componenta modificată cu butonul:

import { AnimatePresence, motion } din"cadrator-miscare";
import { useState } din"reacţiona";
funcţieApp() {
const [isVisible, setIsVisible] = useState(Adevărat);
const toggleVisibility = () => {
 setIsVisible(!isVisible);
 };
întoarcere (
 <>

 {este vizibil && ( <mișcare.div
 initial={{ X: -100, opacitate: 0 }}
 animat={{ X: 0, opacitate: 1 }}
 ieșire={{ X: -100, opacitate: 0 }}
 >
Trimis!</p>
 </motion.div>)}
 </AnimatePresence>

 Notifică
 </button>
 </>
 )
}

Acest cod actualizat adaugă o variabilă de stare numită isVisible folosind cârligul useState. Această variabilă urmărește dacă componenta ar trebui să fie vizibilă. Funcția toggleVisibility comută valoarea isVisible între true și false atunci când faceți clic pe butonul.

Tu ești acum redarea condițională a componentei în funcție de valoarea lui isVisible. Dacă isVisible este adevărat, componenta de mișcare va fi randată cu animația de intrare.

În cele din urmă, adăugați un handler de evenimente onClick la butonul care apelează funcția toggleVisibility, actualizează starea isVisible și declanșează animația de intrare sau ieșire a componentei de mișcare.

Adăugarea unei funcții de relaxare

O funcție de relaxare controlează rata de modificare a animației în timp. Definește momentul unei animații prin specificarea modului în care animația ar trebui să accelereze sau să încetinească pe măsură ce progresează. Fără o funcție de relaxare, animația poate fi redată prea rapid.

Framer Motion oferă mai multe funcții de simplificare din care să alegeți, inclusiv easeInOut. Importați-l în partea de sus a App.jsx din framer-motion pentru a-l folosi.

import { mișcare, easeInOut } din"cadrator-miscare";

Apoi adăugați-l la obiectul de tranziție din componenta de mișcare:

 initial={{ X: -100, opacitate: 0 }}
 animat={{ X: 0, opacitate: 1, tranziție: { durată: 0.5, uşura: easeInOut } }}
 ieșire={{ X: -100, opacitate: 0, tranziție: { durată: 0.5, uşura: easeInOut } }}
>
Trimis!</p>
</motion.div>

Proprietatea duration specifică cât timp ar trebui să ruleze animația.

Utilizați CSS simplu pentru animații simple

Există multe altele pe care le puteți face cu Framer Motion, inclusiv animația 3D. Cu toate acestea, nu aveți întotdeauna nevoie de o bibliotecă pentru a crea animații. Pentru animații simple, cum ar fi tranzițiile de trecere cu mouse-ul, puteți utiliza întotdeauna CSS simplu.