Hur man skapar entré- och utgångsanimationer för en reaktionskomponent med hjälp av Framer Motion

Att animera en React-komponent när den kommer in i eller lämnar skärmen kan vara en utmaning. Detta beror på att när du döljer en komponent tar React bort den från DOM, vilket gör den otillgänglig för animering. När du visar komponenten igen, lägger React till den igen i DOM, vilket kan resultera i ett abrupt utseende utan animering.

Du kan lösa detta problem med ett animationsbibliotek som Framer Motion.

Vad är Framer Motion?

Framer Motion är ett produktionsfärdigt animationsbibliotek för React. Den tillhandahåller en rad komponenter, krokar, nyckelbildrutor och anpassade lättnadsfunktioner för att skapa och kontrollera animationer.

En fördel med Framer Motion är att det gör det enkelt att skapa smidiga och flytande animationer utan att behöva skriva en massa JavaScript-kod eller räkna ut beräkningar för varje övergång.

Den har också ett händelsesystem, som du kan använda för att trigga animationer baserat på användarinmatning som knappklick och gester, vilket skapar interaktiva och dynamiska gränssnitt som känns lyhörda.

För att demonstrera hur man använder Framer Motion i React kommer du att animera en komponent som kommer in och lämnar skärmen när du klickar på en knapp.

Skapa ett React-projekt

För att skapa ett React-projekt måste du göra det installera Node.js och npm (Node Package Manager) på din dator om du inte har det.

När du har installerat dessa beroenden kan du skapa ett nytt React-projekt med Vite genom att köra kommandot yarn vite i din terminal.

garn vite

Detta kommando skapar en ny mapp med alla nödvändiga filer och beroenden förinstallerade. Navigera till mappen och starta utvecklingsservern med kommandot yarn start.

garnstart

Installera Framer Motion i React

Installera Framer Motion genom att köra detta kommando:

npm installera framer-motion

Detta kommando kommer att lägga till Framer Motion som ett beroende till ditt projekt.

Animera en komponent

För att animera en komponent när den kommer in i och lämnar skärmen i React using Framer Motion, måste du linda in den i rörelsekomponenten.

Rörelsekomponenten tillhandahåller en uppsättning egenskaper för att animera komponentens ingång och utgång. Du kan använda inledande, animera och avsluta rekvisita för att kontrollera dess synlighet och position.

För att se det i aktion, lägg till följande kod överst i App.jsx för att importera rörelsekomponenten från framer-motion.

importera { rörelse } från"framer-motion";

Skapa sedan komponenten du vill animera genom att linda in den med rörelsekomponenten. Det här exemplet använder ett div-element men du kan använda vilket annat element du vill, såsom button, li och p bland andra.

importera { rörelse, AnimatePresence } från"framer-motion"
fungeraApp() {
lämna tillbaka (
 <>

 initial={{ x: -100, opacitet: 0 }}
 animera={{ x: 0, opacitet: 1 }}
 exit={{ x: -100, opacitet: 0 }}
 >
Skickat!</p>
 </motion.div>

 </>
 )
}

Rörelsekomponenten låter dig animera div-elementet som innehåller texten "Skickat!".

De första, animera, och utgång egenskaperna för rörelsekomponenten definierar komponentens ingångs- och utgångsanimationer. När komponenten initialt renderas börjar den med en x-position på -100 (utanför skärmen till vänster) och en opacitet på 0 och blir osynlig.

Egenskapen animate definierar hur komponenten ska animeras när den kommer in på skärmen, i det här fallet flyttas från ett x position på -100 till en x-position på 0 (glider in från vänster) och gradvis bleknar till en opacitet på 1 och blir helt synlig.

Slutligen definierar exit-egenskapen hur komponenten ska animeras när du tar bort den från skärmen. I det här fallet kommer komponenten att glida av skärmen till vänster med en x-position på -100 och gradvis tona ut till en opacitet på 0.

Du måste också linda rörelsekomponenten med AnimatePresence-komponenten från framer-motion till animerade komponenter när du tar bort dem från React DOM-trädet.

Nu när du har definierat ingångs- och utgångsanimationerna kan du lägga till en knapp för att utlösa animeringen. Här är den modifierade komponenten med knappen:

importera { AnimatePresence, rörelse } från"framer-motion";
importera { useState } från"reagera";
fungeraApp() {
konst [isVisible, setIsVisible] = useState(Sann);
konst toggleSynlighet = () => {
 setIsVisible(!isVisible);
 };
lämna tillbaka (
 <>

 {är synlig && ( <motion.div
 initial={{ x: -100, opacitet: 0 }}
 animera={{ x: 0, opacitet: 1 }}
 exit={{ x: -100, opacitet: 0 }}
 >
Skickat!</p>
 </motion.div>)}
 </AnimatePresence>

 Meddela
 </button>
 </>
 )
}

Denna uppdaterade kod lägger till en tillståndsvariabel som heter isVisible med hjälp av useState-kroken. Denna variabel spårar om komponenten ska vara synlig. ToggleVisibility-funktionen växlar värdet på isVisible mellan sant och falskt när du klickar på knappen.

Du är nu gör komponenten villkorligt beroende på värdet av isVisible. Om isVisible är sant kommer rörelsekomponenten att återges med ingångsanimeringen.

Lägg slutligen till en onClick-händelsehanterare till knappen som anropar toggleVisibility-funktionen, uppdaterar tillståndet för isVisible och utlöser ingångs- eller utgångsanimeringen av rörelsekomponenten.

Lägga till en lättnadsfunktion

En lättnadsfunktion styr animeringshastigheten över tid. Den definierar tidpunkten för en animering genom att specificera hur animeringen ska snabba upp eller sakta ner när den fortskrider. Utan en lättnadsfunktion kan animeringen renderas för snabbt.

Framer Motion har flera lättnadsfunktioner att välja mellan, inklusive easeInOut. Importera den högst upp i App.jsx från framer-motion för att använda den.

importera { motion, easeInOut } från"framer-motion";

Lägg sedan till det i övergångsobjektet i rörelsekomponenten:

 initial={{ x: -100, opacitet: 0 }}
 animera={{ x: 0, opacitet: 1, övergång: { varaktighet: 0.5, lätthet: easeInOut } }}
 exit={{ x: -100, opacitet: 0, övergång: { varaktighet: 0.5, lätthet: easeInOut } }}
>
Skickat!</p>
</motion.div>

Duration-egenskapen anger hur länge animeringen ska köras.

Använd vanlig CSS för enkla animationer

Det finns så mycket mer du kan göra med Framer Motion inklusive 3D-animation. Du behöver dock inte alltid ett bibliotek för att skapa animationer. För enkla animationer som svävningsövergångar kan du alltid använda vanlig CSS.