Lekce 26 - Animace v Reactu - CSS a tsParticles
V předchozí lekci, React Concurrent Mode - useTransition() a useDeferredValue(), jsme si v rámci React Concurrent Mode
ukázali, jak pracovat s hooky useTransition() a
useDeferredValue().
V dnešním tutoriálu pokročilého Reactu si představíme
vizuální efekty při interakci s uživatelským rozhraním –
animace. V Reactu animace implementujeme buďto pomocí CSS,
nebo přes speciální knihovny. V tutoriálu si představíme oba způsoby.
Využijeme CSS vlastnosti transition a transform a
knihovnu tsParticles.
Animace pomocí CSS
CSS poskytují několik možností, jak jednoduše docílit hezké animace. Navíc nejde o možnosti vázané pouze na React, takže je dobré znát je při webovém vývoji všeobecně.
Vlastnost transition
(přechod)
Přechody pomáhají definovat plynulé změny vlastností elementů. Definujeme v nich, které vlastnosti mají být animované a jak dlouho má animace trvat:
transition: width 2s;
Když není definovaná délka trvání efektu, efekt nebude vidět, jelikož
výchozí hodnota je 0.
Vlastnost transform
(přeměna)
Transformace umožňují animovat elementy posunutím, rotací nebo
škálováním. Typickými transformačními funkcemi jsou
translate(), rotate() a scale().
Funkce translate() posune element na jinou pozici dle parametrů
os X a Y:
...konec náhledu článku...
Pokračuj dál
Došel jsi až sem a to je super! Věříme, že ti první lekce ukázaly něco nového a užitečného.
Chceš v kurzu pokračovat? Přejdi do prémiové sekce.
Koupit tento kurz
Před koupí tohoto článku je třeba koupit předchozí díl
Obsah článku spadá pod licenci Premium, koupí článku souhlasíš se smluvními podmínkami.
- Neomezený a trvalý přístup k jednotlivým lekcím.
- Kvalitní znalosti v oblasti IT.
- Dovednosti, které ti pomohou získat vysněnou a dobře placenou práci.
Popis článku
Požadovaný článek má následující obsah:
V tutoriálu pokročilého Reactu si představíme implementace animací pomocí CSS vlastností transition a transform a knihovny tsParticles.
Kredity získáš, když podpoříš naši síť. To můžeš udělat buď zasláním symbolické částky na podporu provozu nebo přidáním obsahu na síť.
