Przejścia CSS przy zmianach stanu React

CSS-owe transition płynnie interpoluje właściwość między dwiema wartościami w czasie, zamiast zmieniać ją natychmiast. Deklaruje się je na elemencie za pomocą transition: property duration timing-function delay.

W React zazwyczaj nie animuje się ręcznie wartości inline. Zamiast tego za pomocą stanu przełącza się klasę lub styl, a CSS obsługuje klatki pośrednie.

Typowy wzorzec polega na przechowywaniu wartości logicznej w useState i zamianie klasy CSS po jej zmianie. Gdy klasa się zmienia, docelowa właściwość otrzymuje nową wartość, a CSS animuje różnicę.

Na przykład isOpen określa, czy element ma klasę open, a klasa open ustawia inną wysokość lub transformację.

Typowa konfiguracja to const [isVisible, setIsVisible] = useState(false). Przycisk wywołuje setIsVisible(v => !v), aby przełączyć wartość.

Użycie aktualizatora funkcyjnego v => !v zapobiega odczytaniu nieaktualnego stanu, gdy kilka aktualizacji zostanie dodanych do kolejki, dzięki czemu przełączanie działa niezawodnie.

Klasę className buduje się dynamicznie: className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}. Klasa bazowa zawiera deklarację przejścia, a klasy modyfikatorów przechowują wartości początkowe i końcowe.

Umieszczenie transition w zawsze obecnej klasie bazowej sprawia, że animacja działa w obu kierunkach — podczas otwierania i zamykania.

Można animować kilka właściwości naraz, wymieniając je po przecinku: transition: transform 300ms ease, opacity 300ms ease. Efekt płynnego pojawiania się i przesuwania łączy zmianę opacity z użyciem translateY we właściwości transform.

Jednoczesne animowanie obu właściwości zapewnia dopracowane pojawianie się elementu, który przesuwa się w górę i równocześnie staje się widoczny.

transition-delay opóźnia rozpoczęcie przejścia. Nadanie elementom listy coraz większych opóźnień tworzy kaskadę, w której każdy element animuje się chwilę po poprzednim.

W React opóźnienie można obliczyć inline, na przykład style={{ transitionDelay: index * 50 + 'ms' }}.

Właściwość display nie jest animowalna, ponieważ między wartościami none i block nie ma wartości pośrednich. Przejście tej właściwości powoduje natychmiastową zmianę, a nie płynne pojawianie się.

Zamiast tego należy animować opacity, aby uzyskać efekt wizualnego zanikania, oraz przełączać pointer-events: none, aby ukryty element ignorował kliknięcia, gdy jest niewidoczny.

Funkcja czasowa określa, jak zmienia się prędkość w czasie trwania animacji. linear porusza się ze stałą prędkością, ease rozpoczyna się i kończy powoli, a cubic-bezier(...) pozwala zdefiniować całkowicie niestandardową krzywą.

Niestandardowe krzywe świetnie nadają się do uzyskania efektu dynamicznego lub sprężystego, na przykład cubic-bezier(0.34, 1.56, 0.64, 1) zapewnia niewielkie przekroczenie wartości docelowej.

Czasy trwania można przechowywać we własnych właściwościach CSS, takich jak --speed: 300ms, i używać ich ponownie: transition: opacity var(--speed) ease. Dzięki temu czas trwania pozostaje spójny we wszystkich komponentach.

React może nawet ustawiać tę zmienną inline za pomocą style={{ '--speed': '500ms' }}, pozwalając właściwościom komponentu sterować czasem trwania animacji.

Przeglądarki mogą animować transform i opacity w kompozytorze GPU bez ponownego obliczania układu ani ponownego malowania. Animowanie właściwości takich jak width, top czy margin wymusza obliczenia układu przy każdej klatce i może powodować zacinanie.

Gdy trzeba przesunąć, przeskalować lub obrócić element, należy użyć transform; gdy trzeba uzyskać efekt zanikania, należy użyć opacity.

Niezawodne przejście w React łączy stan logiczny, warunkową klasę modyfikatora oraz klasę bazową, która deklaruje transition dla właściwości przyjaznych dla GPU. Stan przełącza klasę, a CSS zajmuje się animacją.

Dzięki temu komponenty zachowują deklaratywny charakter, a przeglądarka może tworzyć płynny ruch.

Nauczono się uruchamiać przejścia CSS przez przełączanie klas sterowanych stanem, animować jednocześnie transform i opacity, tworzyć efekt kaskadowy za pomocą opóźnień oraz unikać animowania display przez użycie opacity wraz z pointer-events.

Omówiono także funkcje czasowe, czasy trwania przechowywane w zmiennych CSS oraz to, dlaczego właściwości kompozytowane przez GPU zapewniają płynny ruch.