26. diel - Animácie v React - CSS a tsParticles
V predchádzajúcej lekcii, React Concurrent Mode - useTransition() a useDeferredValue() , sme si v rámci React Concurrent
Mode ukázali ako pracovať s hookmi useTransition() a
useDeferredValue().
V dnešnom tutoriále pokročilého Reactu si predstavíme
vizuálne efekty pri interakcii s užívateľským rozhraním-
animácie. V React animácie implementujeme buď pomocou CSS
alebo cez špeciálne knižnice. V tutoriále si predstavíme oba spôsoby.
Využijeme CSS vlastnosti transition a transform a
knižnicu tsParticles.
Animácie pomocou CSS
CSS poskytujú niekoľko možností, ako jednoducho docieliť pekné animácie. Navyše nejde o možnosti viazané iba na React, takže je dobré poznať ich pri webovom vývoji všeobecne.
Vlastnosť transition
(prechod)
Prechody pomáhajú definovať plynulé zmeny vlastností elementov. Definujeme v nich, ktoré vlastnosti majú byť animované a ako dlho má animácia trvať:
Keď nie je definovaná
dĺžka trvania efektu, efekt nebude vidieť, pretože predvolená hodnota je
0.
Vlastnosť transform
(premena)
Transformácie umožňujú animovať elementy posunutím, rotáciou alebo
škálovaním. Typickými transformačnými funkciami sú
translate(), rotate() a scale().
Funkcia translate() posunie element na inú pozíciu podľa
parametrov osí X a Y:
...koniec náhľadu článku...
Pokračuj ďalej
Minul si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiové sekcie.
Kúpiť tento kurz
Pred kúpou tohto článku je potrebné kúpiť predchádzajúci diel
Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš so zmluvnými podmienkami.
- Neobmedzený a trvalý prístup k jednotlivým lekciím.
- Kvalitné znalosti v oblasti IT.
- Zručnosti, ktoré ti pomôžu získať vysnívanú a dobre platenú prácu.
Popis článku
Požadovaný článok má nasledujúci obsah:
V tutoriále pokročilého Reactu si predstavíme implementáciu animácií pomocou CSS vlastností transition a transform a knižnice tsParticles.
Kredity získaš, keď podporíš našu sieť. To môžeš urobiť buď zaslaním symbolickej sumy na podporu prevádzky alebo pridaním obsahu na sieť.
