Hogyan hozzunk létre bejárati és kilépési animációkat egy React komponenshez a Framer Motion segítségével

A React komponens animálása, amikor az belép vagy elhagyja a képernyőt, kihívást jelenthet. Ennek az az oka, hogy amikor elrejt egy összetevőt, a React eltávolítja azt a DOM-ból, ami nem teszi elérhetővé az animáció számára. Amikor ismét megjeleníti az összetevőt, a React újra hozzáadja a DOM-hoz, ami hirtelen megjelenést eredményezhet animáció nélkül.

Ezt a problémát egy animációs könyvtárral, például a Framer Motionnal oldhatja meg.

Mi az a Framer Motion?

A Framer Motion egy gyártásra kész animációs könyvtár a React számára. Számos összetevőt, horgokat, kulcskockákat és egyéni könnyítési funkciókat kínál az animációk létrehozásához és vezérléséhez.

A Framer Motion egyik előnye, hogy egyszerűvé teszi sima és gördülékeny animációk létrehozását anélkül, hogy sok JavaScript-kódot kellene írnia vagy számításokat kellene kitalálnia az egyes átmenetekhez.

Eseményrendszerrel is rendelkezik, amellyel animációkat indíthat el a felhasználói bevitelen, például a gombkattintásokon és gesztusokon alapuló interaktív és dinamikus interfészek létrehozásával, amelyek reagálnak.

A Framer Motion React alkalmazásban való használatának bemutatásához animál egy komponenst, amely egy gombra kattintva belép és elhagyja a képernyőt.

React projekt létrehozása

React projekt létrehozásához szüksége lesz telepítse a Node.js és az npm (Node Package Manager) fájlt a gépére ha még nem tetted.

Miután telepítette ezeket a függőségeket, megteheti hozzon létre egy új React projektet a Vite segítségével a yarn vite parancs futtatásával a terminálban.

fonal vite

Ez a parancs egy új mappát hoz létre az összes szükséges fájllal és függőséggel előre telepítve. Keresse meg a mappát, és indítsa el a fejlesztőkiszolgálót a yarn start paranccsal.

fonal indítás

A Framer Motion telepítése a Reactban

Telepítse a Framer Motion-t a következő parancs futtatásával:

npm a framer-motion telepítése

Ez a parancs a Framer Motion-t függőségként adja hozzá a projekthez.

Egy komponens animálása

Ha animálni szeretne egy komponenst, amint az belép és elhagyja a képernyőt, a React with Framer Motion funkcióval be kell csomagolnia a mozgáskomponensbe.

A mozgáskomponens tulajdonságkészletet biztosít az összetevő be- és kilépésének animálásához. A kezdeti, animációs és kilépési kellékekkel szabályozhatja a láthatóságát és helyzetét.

A működés közbeni megtekintéséhez adja hozzá a következő kódot az App.jsx tetejéhez, hogy importálja a mozgáskomponenst a framer-motion programból.

import { mozgás } tól től"framer-motion";

Ezután hozza létre az animálni kívánt összetevőt úgy, hogy becsomagolja a mozgáskomponenssel. Ez a példa div elemet használ, de használhat bármilyen más elemet, például gombot, li-t és p-t.

import { mozgás, AnimatePresence } tól től"framer-motion"
funkcióApp() {
Visszatérés (
 <>

 kezdeti={{ x: -100, átlátszatlanság: 0 }}
 anim={{ x: 0, átlátszatlanság: 1 }}
 exit={{ x: -100, átlátszatlanság: 0 }}
 >
Elküldve!</p>
 </motion.div>

 </>
 )
}

A mozgás komponens lehetővé teszi a „Elküldött!” szöveget tartalmazó div elem animálását.

A a kezdeti, élő, és kijárat a mozgáskomponens tulajdonságai határozzák meg a komponens be- és kilépési animációit. Amikor az összetevőt először rendereli, az x pozíciója -100 (a képernyőn kívül balra) és átlátszatlansága 0, és láthatatlanná válik.

Az animáció tulajdonság határozza meg, hogy a komponens hogyan animáljon, amikor megjelenik a képernyőn, ebben az esetben egy x-ről mozog -100 pozícióból 0 x pozícióba (balról becsúsztatva), majd fokozatosan 1-es átlátszatlanságig halványul és teljesen látható.

Végül az exit tulajdonság határozza meg, hogy az összetevő hogyan animáljon, amikor eltávolítja a képernyőről. Ebben az esetben az összetevő balra csúszik le a képernyőről -100-as x pozícióval, és fokozatosan elhalványul 0 átlátszatlanságig.

A mozgó komponenst az AnimatePresence komponenssel is be kell csomagolnia a framer-motionből az animált összetevőkhöz, amikor eltávolítja őket a React DOM fából.

Most, hogy meghatározta a bejárati és kilépési animációkat, hozzáadhat egy gombot az animáció elindításához. Íme a módosított komponens a gombbal:

import { AnimatePresence, motion } tól től"framer-motion";
import { useState } tól től"reagál";
funkcióApp() {
const [isVisible, setIsVisible] = useState(igaz);
const toggleVisibility = () => {
 setIsVisible(!isVisible);
 };
Visszatérés (
 <>

 {látható && ( <mozgás.div
 kezdeti={{ x: -100, átlátszatlanság: 0 }}
 anim={{ x: 0, átlátszatlanság: 1 }}
 exit={{ x: -100, átlátszatlanság: 0 }}
 >
Elküldve!</p>
 </motion.div>)}
 </AnimatePresence>

 Értesítés
 </button>
 </>
 )
}

Ez a frissített kód hozzáad egy isVisible nevű állapotváltozót a useState hook segítségével. Ez a változó nyomon követi, hogy az összetevőnek láthatónak kell-e lennie. A toggleVisibility függvény az isVisible értékét igaz és hamis között váltja, amikor a gombra kattint.

Most te vagy az összetevő feltételes megjelenítése az isVisible értékétől függően. Ha az isVisible igaz, akkor a mozgás komponens a belépési animációval együtt jelenik meg.

Végül adjon hozzá egy onClick eseménykezelőt a gombhoz, amely meghívja a toggleVisibility függvényt, frissíti az isVisible állapotát, és elindítja a mozgáskomponens be- vagy kilépési animációját.

Könnyítő funkció hozzáadása

Egy könnyítő funkció szabályozza az animáció időbeli változásának sebességét. Meghatározza az animáció időzítését azáltal, hogy megadja, hogyan gyorsuljon vagy lassuljon az animáció előrehaladtával. Könnyítő funkció nélkül az animáció túl gyorsan jelenhet meg.

A Framer Motion számos könnyítő funkciót kínál, amelyek közül választhat, beleértve az easyInOut-ot. A használatához importálja az App.jsx tetejére a framer-motion alkalmazásból.

import { mozgás, easyInOut } tól től"framer-motion";

Ezután adja hozzá az átmeneti objektumhoz a mozgáskomponensben:

 kezdeti={{ x: -100, átlátszatlanság: 0 }}
 anim={{ x: 0, átlátszatlanság: 1, átmenet: { időtartama: 0.5, könnyedség: easyInOut } }}
 exit={{ x: -100, átlátszatlanság: 0, átmenet: { időtartama: 0.5, könnyedség: easyInOut } }}
>
Elküldve!</p>
</motion.div>

Az időtartam tulajdonság megadja, hogy mennyi ideig futjon az animáció.

Használjon egyszerű CSS-t az egyszerű animációkhoz

A Framer Motion segítségével sokkal többet tehet, beleértve a 3D animációt is. Animációk készítéséhez azonban nem mindig van szükség könyvtárra. Az egyszerű animációkhoz, például a lebegő átmenetekhez, mindig használhat egyszerű CSS-t.