Sådan opretter du indgangs- og udgangsanimationer til en reaktionskomponent ved hjælp af Framer Motion

At animere en React-komponent, når den kommer ind eller forlader skærmen, kan være en udfordring. Dette skyldes, at når du skjuler en komponent, fjerner React den fra DOM, hvilket gør den utilgængelig til animation. Når du viser komponenten igen, tilføjer React den igen til DOM, hvilket kan resultere i et pludseligt udseende uden animation.

Du kan løse dette problem med et animationsbibliotek som Framer Motion.

Hvad er Framer Motion?

Framer Motion er et produktionsklart animationsbibliotek til React. Det giver en række komponenter, kroge, keyframes og brugerdefinerede easing-funktioner til at skabe og kontrollere animationer.

En fordel ved Framer Motion er, at det gør det nemt at skabe jævne og flydende animationer uden at skulle skrive en masse JavaScript-kode eller finde ud af beregninger for hver overgang.

Det har også et begivenhedssystem, som du kan bruge til at udløse animationer baseret på brugerinput såsom knapklik og bevægelser, hvilket skaber interaktive og dynamiske grænseflader, der føles responsive.

For at demonstrere, hvordan du bruger Framer Motion i React, vil du animere en komponent, der kommer ind og forlader skærmen, når du klikker på en knap.

Oprettelse af et React-projekt

For at oprette et React-projekt skal du installer Node.js og npm (Node Package Manager) på din maskine hvis du ikke har.

Når du har disse afhængigheder installeret, kan du oprette et nyt React-projekt ved hjælp af Vite ved at køre kommandoen garn vite i din terminal.

garn vite

Denne kommando vil oprette en ny mappe med alle de nødvendige filer og afhængigheder forudinstalleret. Naviger til mappen og start udviklingsserveren med kommandoen yarn start.

garn start

Installation af Framer Motion i React

Installer Framer Motion ved at køre denne kommando:

npm installer framer-motion

Denne kommando tilføjer Framer Motion som en afhængighed til dit projekt.

Animering af en komponent

For at animere en komponent, når den kommer ind og forlader skærmen i React using Framer Motion, skal du pakke den ind i bevægelseskomponenten.

Bevægelseskomponenten giver et sæt egenskaber til at animere komponentens indgang og udgang. Du kan bruge start-, animations- og exit-rekvisitter til at kontrollere dens synlighed og position.

For at se det i aktion skal du tilføje følgende kode øverst i App.jsx for at importere bevægelseskomponenten fra framer-motion.

importere { bevægelse } fra"framer-motion";

Opret derefter den komponent, du vil animere, ved at pakke den ind med bevægelseskomponenten. Dette eksempel bruger et div-element, men du kan bruge et hvilket som helst andet element, du ønsker, såsom button, li og p blandt andre.

importere { bevægelse, AnimatePresence } fra"framer-motion"
fungereApp() {
Vend tilbage (
 <>

 initial={{ x: -100, Gennemsigtighed: 0 }}
 animere={{ x: 0, Gennemsigtighed: 1 }}
 exit={{ x: -100, Gennemsigtighed: 0 }}
 >
Sendt!</p>
 </motion.div>

 </>
 )
}

Bevægelseskomponenten giver dig mulighed for at animere div-elementet, der indeholder teksten "Sendt!".

Det initial, animere, og Afslut egenskaber for bevægelseskomponenten definerer komponentens indgangs- og udgangsanimationer. Når komponenten oprindeligt gengives, starter den med en x-position på -100 (uden for skærmen til venstre) og en opacitet på 0 og bliver usynlig.

Egenskaben animate definerer, hvordan komponenten skal animere, når den kommer ind på skærmen, i dette tilfælde flyttes fra et x position på -100 til en x-position på 0 (glider ind fra venstre) og gradvist falmer ind i en opacitet på 1 og bliver fuldstændig synlig.

Endelig definerer exit-egenskaben, hvordan komponenten skal animeres, når du fjerner den fra skærmen. I dette tilfælde vil komponenten glide af skærmen til venstre med en x-position på -100 og gradvist fade ud til en opacitet på 0.

Du skal også ombryde bevægelseskomponenten med AnimatePresence-komponenten fra framer-motion til animation af komponenter, når du fjerner dem fra React DOM-træet.

Nu hvor du har defineret indgangs- og udgangsanimationerne, kan du tilføje en knap for at udløse animationen. Her er den ændrede komponent med knappen:

importere { AnimatePresence, motion } fra"framer-motion";
importere { useState } fra"reagere";
fungereApp() {
konst [isVisible, setIsVisible] = useState(rigtigt);
konst toggleSynlighed = () => {
 setIsVisible(!isVisible);
 };
Vend tilbage (
 <>

 {erVisible && ( <motion.div
 initial={{ x: -100, Gennemsigtighed: 0 }}
 animere={{ x: 0, Gennemsigtighed: 1 }}
 exit={{ x: -100, Gennemsigtighed: 0 }}
 >
Sendt!</p>
 </motion.div>)}
 </AnimatePresence>

 Underrette
 </button>
 </>
 )
}

Denne opdaterede kode tilføjer en tilstandsvariabel kaldet isVisible ved hjælp af useState-krogen. Denne variabel sporer, om komponenten skal være synlig. ToggleVisibility-funktionen skifter værdien af ​​isVisible mellem sand og falsk, når du klikker på knappen.

Det er du nu at gøre komponenten betinget afhængig af værdien af ​​isVisible. Hvis isVisible er sandt, gengives bevægelseskomponenten med indgangsanimationen.

Tilføj endelig en onClick-hændelseshandler til knappen, der kalder toggleVisibility-funktionen, opdaterer tilstanden for isVisible og udløser ind- eller udgangsanimationen af ​​bevægelseskomponenten.

Tilføjelse af en lettelsesfunktion

En lettelsesfunktion styrer hastigheden for ændring af animation over tid. Den definerer timingen af ​​en animation ved at specificere, hvordan animationen skal fremskynde eller bremse, efterhånden som den skrider frem. Uden en lettelsesfunktion kan animationen gengives for hurtigt.

Framer Motion har flere easing-funktioner at vælge imellem, herunder easeInOut. Importer det øverst i App.jsx fra framer-motion for at bruge det.

importere { motion, easeInOut } fra"framer-motion";

Tilføj det derefter til overgangsobjektet i bevægelseskomponenten:

 initial={{ x: -100, Gennemsigtighed: 0 }}
 animere={{ x: 0, Gennemsigtighed: 1, overgang: { varighed: 0.5, lethed: easeInOut } }}
 exit={{ x: -100, Gennemsigtighed: 0, overgang: { varighed: 0.5, lethed: easeInOut } }}
>
Sendt!</p>
</motion.div>

Egenskaben varighed angiver, hvor længe animationen skal køre.

Brug almindelig CSS til simple animationer

Der er så meget mere, du kan gøre med Framer Motion, herunder 3D-animation. Du behøver dog ikke altid et bibliotek for at lave animationer. Til simple animationer såsom svæveovergange kan du altid bruge almindelig CSS.