# 176: Delo z Framer Motion - CSS-triki

Anonim

Z Mattom Perryjem iz Framerja si ogledamo knjižnico animacij React Framer Motion.

Najprej si oglejmo, kako preprost je API. Vse nadzorujete zelo deklarativno s pomočjo rekvizitov elementov v vašem JSX. Nadzor animacije na tej plasti je zelo intuitiven in smiselno povezan z uporabniškim vmesnikom in stanjem.

Vsak primer, ki si ga ogledamo, je bolj iz resničnega sveta in vključuje več lastnosti tega, kar je zmožen Framer Motion. Razvijalcem React bo všeč sintaksa vsega, vsem ostalim pa neverjetno zmogljivi in ​​gladki rezultati.

Na koncu pogledamo samega Framerja, ki to točno to knjižnico interno uporablja za vse animacijske stvari, ki jih Framer počne. Zanimiv Framer? Prenesite Framer X.

Predstavitev 1: Osnovna sintaksa

Demo 2: različice

Predstavitev 3: AnimatePresence in layoutTransition

Bonus: preverite funkcijo "pomakni se do opustitve" v pojavnem oknu slike.