React Transition Group State Machine: Mistrzostwo w Zarządzaniu Stanem Animacji

Animacje mogą znacząco poprawić komfort użytkowania aplikacji internetowej, zapewniając wizualne sprzężenie zwrotne i sprawiając, że interakcje wydają się bardziej angażujące. Jednak zarządzanie złożonymi stanami animacji, szczególnie w dynamicznych aplikacjach React, może szybko stać się wyzwaniem. To właśnie tutaj połączenie React Transition Group i automatów stanów okazuje się nieocenione. Ten artykuł zagłębia się w to, jak możesz wykorzystać te narzędzia do tworzenia solidnej, łatwej w utrzymaniu i deklaratywnej logiki animacji.

Zrozumienie Podstawowych Koncepcji

Czym jest React Transition Group?

React Transition Group (RTG) sam w sobie nie jest biblioteką animacji. Zamiast tego udostępnia komponent, który pomaga zarządzać przejściami komponentów do i z DOM. Udostępnia on hooki cyklu życia, których można użyć do wyzwalania przejść CSS, animacji CSS lub animacji JavaScript. Koncentruje się na tym, *kiedy* komponenty powinny być animowane, a nie *jak* powinny być animowane.

Kluczowe komponenty w React Transition Group obejmują:

• <Transition>: Podstawowy element konstrukcyjny do animowania pojedynczego elementu potomnego. Monitoruje on właściwość `in` i wyzwala przejścia wejścia, wyjścia i pojawiania się.
• <CSSTransition>: Komponent ułatwiający dodawanie i usuwanie klas CSS podczas faz przejścia. Jest to często najprostszy sposób na integrację przejść lub animacji CSS.
• <TransitionGroup>: Zarządza zestawem komponentów <Transition> lub <CSSTransition>. Jest przydatny do animowania list elementów, tras lub innych kolekcji komponentów.

Czym jest Automat Stanów?

Automat stanów to matematyczny model obliczeń, który opisuje zachowanie systemu. Definiuje on skończoną liczbę stanów, zdarzenia, które wyzwalają przejścia między tymi stanami, oraz działania, które występują podczas tych przejść. Używanie automatów stanów zapewnia przewidywalność i przejrzystość złożonej logiki.

Korzyści z używania automatów stanów obejmują:

• Lepsza Organizacja Kodu: Automaty stanów wymuszają uporządkowane podejście do zarządzania logiką aplikacji.
• Zwiększona Przewidywalność: Przejścia stanów są wyraźnie zdefiniowane, dzięki czemu zachowanie aplikacji jest bardziej przewidywalne i łatwiejsze do debugowania.
• Ulepszona Testowalność: Automaty stanów dobrze nadają się do testowania jednostkowego, ponieważ każdy stan i przejście można testować niezależnie.
• Zmniejszona Złożoność: Dzieląc złożoną logikę na mniejsze, łatwiejsze do zarządzania stany, możesz uprościć ogólny projekt aplikacji.

Popularne biblioteki automatów stanów dla JavaScript obejmują XState, Robot i Machina.js. W tym artykule skupimy się na ogólnych zasadach mających zastosowanie w różnych bibliotekach, ale przykłady mogą skłaniać się ku XState ze względu na jego ekspresyjność i funkcje.

Połączenie React Transition Group i Automatów Stanów

Siła pochodzi z synchronizacji React Transition Group z automatem stanów. Automat stanów zarządza ogólnym stanem animacji, a React Transition Group obsługuje rzeczywiste przejścia wizualne w oparciu o bieżący stan.

Przypadek Użycia: Okno Modalne ze Złożonymi Przejściami

Rozważmy okno modalne, które obsługuje różne stany przejścia, takie jak:

• Wchodzenie: Modal animuje się do widoku.
• Wszedł: Modal jest w pełni widoczny.
• Wychodzenie: Modal animuje się poza widok.
• Wyszedł: Modal jest ukryty.

Możemy dodać dalszą złożoność, wprowadzając stany takie jak:

• Ładowanie: Modal pobiera dane przed wyświetleniem.
• Błąd: Wystąpił błąd podczas ładowania danych.

Zarządzanie tymi stanami za pomocą prostych flag boolowskich może szybko stać się nieporęczne. Automat stanów zapewnia znacznie czystsze rozwiązanie.

Przykładowa Implementacja z XState

Oto podstawowy przykład użycia XState:

```javascript import React, { useRef } from 'react'; import { useMachine } from '@xstate/react'; import { createMachine } from 'xstate'; import { CSSTransition } from 'react-transition-group'; import './Modal.css'; // Import your CSS file const modalMachine = createMachine({ id: 'modal', initial: 'hidden', states: { hidden: { on: { OPEN: 'entering', }, }, entering: { entry: 'logEntering', after: { 300: 'visible', // Adjust duration as needed }, }, visible: { on: { CLOSE: 'exiting', }, }, exiting: { entry: 'logExiting', after: { 300: 'hidden', // Adjust duration as needed }, }, }, actions: { logEntering: () => console.log('Entering modal...'), logExiting: () => console.log('Exiting modal...'), } }); function Modal({ children }) { const [state, send] = useMachine(modalMachine); const nodeRef = useRef(null); const isOpen = state.matches('visible') || state.matches('entering'); return ( <> send('OPEN')}>Open Modal

{children} send('CLOSE')}>Close Modal

); } export default Modal; ``` ```css /* Modal.css */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modal-content { background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } /* Transition Classes */ .modal-enter { opacity: 0; } .modal-enter-active { opacity: 1; transition: opacity 300ms ease-in-out; } .modal-exit { opacity: 1; } .modal-exit-active { opacity: 0; transition: opacity 300ms ease-in-out; } ```

Wyjaśnienie:

• Definicja Automatu Stanów: `modalMachine` definiuje stany (`hidden`, `entering`, `visible`, `exiting`) i przejścia między nimi (wyzwalane przez zdarzenia `OPEN` i `CLOSE`). Właściwość `after` używa opóźnień, aby automatycznie przejść między `entering` -> `visible` i `exiting` -> `hidden`.
• Komponent React: Komponent `Modal` używa hooka `useMachine` z `@xstate/react` do zarządzania automatem stanów.
• React Transition Group: Komponent `CSSTransition` monitoruje boolean `isOpen` (pochodzący z bieżącego stanu automatu stanów). Stosuje klasy CSS (`modal-enter`, `modal-enter-active`, `modal-exit`, `modal-exit-active`) w celu wyzwolenia przejść CSS.
• Przejścia CSS: CSS definiuje rzeczywiste animacje za pomocą właściwości `opacity` i właściwości `transition`.

Korzyści z tego Podejścia

• Rozdzielenie Obowiązków: Automat stanów zarządza logiką animacji, podczas gdy React Transition Group obsługuje przejścia wizualne.
• Deklaratywny Kod: Automat stanów definiuje pożądane stany i przejścia, dzięki czemu kod jest łatwiejszy do zrozumienia i utrzymania.
• Testowalność: Automat stanów można łatwo przetestować w izolacji.
• Elastyczność: To podejście można rozszerzyć, aby obsługiwać bardziej złożone animacje i interakcje.

Zaawansowane Techniki

Dynamiczne Przejścia Oparte na Stanie

Możesz dostosować przejścia w oparciu o bieżący stan. Na przykład możesz chcieć użyć innej animacji do wchodzenia i wychodzenia z modala.

```javascript const modalMachine = createMachine({ id: 'modal', initial: 'hidden', context: { animationType: 'fade', }, states: { hidden: { on: { OPEN_FADE: { target: 'entering', actions: assign({ animationType: 'fade' }), }, OPEN_SLIDE: { target: 'entering', actions: assign({ animationType: 'slide' }), }, }, }, entering: { entry: 'logEntering', after: { 300: 'visible', // Adjust duration as needed }, }, visible: { on: { CLOSE: 'exiting', }, }, exiting: { entry: 'logExiting', after: { 300: 'hidden', // Adjust duration as needed }, }, }, actions: { logEntering: () => console.log('Entering modal...'), logExiting: () => console.log('Exiting modal...'), } }); function Modal({ children }) { const [state, send] = useMachine(modalMachine); const nodeRef = useRef(null); const isOpen = state.matches('visible') || state.matches('entering'); const animationType = state.context.animationType; let classNames = `modal ${animationType}` return ( <> send('OPEN_FADE')}>Open Modal (Fade) send('OPEN_SLIDE')}>Open Modal (Slide)

{children} send('CLOSE')}>Close Modal

); } ``` ```css /* Modal.css */ /*Existing CSS*/ /* Fade Animation */ .modal.fade-enter { opacity: 0; } .modal.fade-enter-active { opacity: 1; transition: opacity 300ms ease-in-out; } .modal.fade-exit { opacity: 1; } .modal.fade-exit-active { opacity: 0; transition: opacity 300ms ease-in-out; } /* Slide Animation */ .modal.slide-enter { transform: translateY(-100%); opacity: 0; } .modal.slide-enter-active { transform: translateY(0); opacity: 1; transition: transform 300ms ease-in-out, opacity 300ms ease-in-out; } .modal.slide-exit { transform: translateY(0); opacity: 1; } .modal.slide-exit-active { transform: translateY(-100%); opacity: 0; transition: transform 300ms ease-in-out, opacity 300ms ease-in-out; } ```

W tym przykładzie `animationType` jest przechowywany w kontekście automatu stanów. Zdarzenia `OPEN_FADE` i `OPEN_SLIDE` aktualizują ten kontekst, a komponent `Modal` używa tej wartości do dynamicznego konstruowania właściwości `classNames` dla komponentu `CSSTransition`.

Animowanie List z TransitionGroup

Komponent `TransitionGroup` React Transition Group jest idealny do animowania list elementów. Każdy element na liście można opakować w komponent `CSSTransition`, a `TransitionGroup` będzie zarządzać animacjami wejścia i wyjścia.

```javascript import React, { useState, useRef } from 'react'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import './List.css'; function List() { const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']); const addItem = () => { setItems([...items, `Item ${items.length + 1}`]); }; const removeItem = (index) => { setItems(items.filter((_, i) => i !== index)); }; return ( ); } export default List; ``` ```css /* List.css */ .list-group { margin-top: 20px; } .list-item { background-color: #f0f0f0; padding: 10px; margin-bottom: 5px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; } .list-item-enter { opacity: 0; transform: translateX(-100%); } .list-item-enter-active { opacity: 1; transform: translateX(0); transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; } .list-item-exit { opacity: 1; transform: translateX(0); } .list-item-exit-active { opacity: 0; transform: translateX(-100%); transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; } ```

Kluczowe punkty:

• Każdy element listy jest opakowany w `CSSTransition`.
• Właściwość `key` na `CSSTransition` jest kluczowa, aby React mógł zidentyfikować, które elementy są dodawane lub usuwane.
• `TransitionGroup` zarządza przejściami wszystkich podrzędnych komponentów `CSSTransition`.

Używanie Animacji JavaScript

Chociaż przejścia CSS są często najłatwiejszym sposobem na animowanie komponentów, można również użyć animacji JavaScript, aby uzyskać bardziej złożone efekty. React Transition Group udostępnia hooki cyklu życia, które umożliwiają wyzwalanie animacji JavaScript za pomocą bibliotek takich jak GreenSock (GSAP) lub Anime.js.

Zamiast `classNames`, użyj właściwości `onEnter`, `onEntering`, `onEntered`, `onExit`, `onExiting` i `onExited` komponentu `Transition`, aby kontrolować animację.

Najlepsze Praktyki dla Rozwoju Globalnego

Wdrażając animacje w kontekście globalnym, ważne jest, aby wziąć pod uwagę czynniki takie jak dostępność, wydajność i wrażliwość kulturowa.

Dostępność

• Szanuj Preferencje Użytkownika: Pozwól użytkownikom wyłączyć animacje, jeśli wolą (np. używając zapytania o media `prefers-reduced-motion`).
• Zapewnij Alternatywy: Upewnij się, że wszystkie istotne informacje są nadal przekazywane, nawet jeśli animacje są wyłączone.
• Używaj Subtelnych Animacji: Unikaj nadmiernych lub rozpraszających animacji, które mogą być przytłaczające lub wywoływać chorobę lokomocyjną.
• Nawigacja Klawiaturą: Upewnij się, że wszystkie interaktywne elementy są dostępne za pomocą nawigacji klawiaturą.

Wydajność

• Optymalizuj Animacje: Używaj transformacji CSS i krycia dla płynnych animacji. Unikaj animowania właściwości układu, takich jak `width` i `height`.
• Debounce i Throttle: Ogranicz częstotliwość animacji wyzwalanych przez dane wejściowe użytkownika.
• Używaj Akceleracji Sprzętowej: Upewnij się, że animacje są akcelerowane sprzętowo przez przeglądarkę.

Wrażliwość Kulturowa

• Unikaj Stereotypów: Bądź świadomy stereotypów kulturowych podczas używania animacji.
• Używaj Obrazów Integracyjnych: Wybieraj obrazy, które reprezentują zróżnicowaną publiczność.
• Rozważ Różne Języki: Upewnij się, że animacje działają poprawnie z różnymi językami i kierunkami pisania (np. języki od prawej do lewej).

Typowe Pułapki i Rozwiązania

Animacja Nie Jest Wyzwalana

Problem: Animacja nie rozpoczyna się, gdy komponent wchodzi lub wychodzi.

Rozwiązanie:

• Sprawdź Nazwy Klas: Upewnij się, że nazwy klas CSS używane we właściwości `classNames` elementu `CSSTransition` pasują do nazw klas zdefiniowanych w pliku CSS.
• Sprawdź Limit Czasu: Upewnij się, że właściwość `timeout` jest wystarczająco długa, aby animacja mogła się zakończyć.
• Sprawdź DOM: Użyj narzędzi programistycznych przeglądarki, aby sprawdzić DOM i upewnić się, że stosowane są poprawne klasy CSS.
• Problem z Właściwością Key w Listach Podczas animowania list brakujące lub nieunikalne właściwości 'key' w komponentach Transition lub CSSTransition często powodują problemy. Upewnij się, że klucze są oparte na stabilnych, unikalnych identyfikatorach dla każdego elementu na liście.

Animacja Zacina Się lub Opóźnia

Problem: Animacja nie jest płynna i wydaje się zacinać lub opóźniać.

Rozwiązanie:

• Optymalizuj CSS: Używaj transformacji CSS i krycia dla płynniejszych animacji. Unikaj animowania właściwości układu.
• Akceleracja Sprzętowa: Upewnij się, że animacje są akcelerowane sprzętowo.
• Zmniejsz Aktualizacje DOM: Zminimalizuj liczbę aktualizacji DOM podczas animacji.

Komponent Nie Jest Odmontowywany

Problem: Komponent nie jest odmontowywany po zakończeniu animacji wyjścia.

Rozwiązanie:

• Użyj `unmountOnExit`: Ustaw właściwość `unmountOnExit` elementu `CSSTransition` na `true`, aby upewnić się, że komponent zostanie odmontowany po animacji wyjścia.
• Sprawdź Logikę Automatu Stanów: Sprawdź, czy automat stanów poprawnie przechodzi do stanu `hidden` lub `exited` po zakończeniu animacji.

Wniosek

Połączenie React Transition Group i automatów stanów zapewnia potężne i łatwe w utrzymaniu podejście do zarządzania stanem animacji w aplikacjach React. Oddzielając obowiązki, używając deklaratywnego kodu i przestrzegając najlepszych praktyk, możesz tworzyć angażujące i dostępne doświadczenia użytkownika, które poprawiają użyteczność i atrakcyjność Twojej aplikacji. Pamiętaj, aby wziąć pod uwagę dostępność, wydajność i wrażliwość kulturową podczas wdrażania animacji dla globalnej publiczności.

Opanowując te techniki, będziesz dobrze przygotowany do obsługi nawet najbardziej złożonych scenariuszy animacji i tworzenia naprawdę imponujących interfejsów użytkownika.

Dalsze Zasoby

• Dokumentacja React Transition Group
• Dokumentacja XState
• Biblioteka Animacji GreenSock (GSAP)
• Biblioteka Animacji Anime.js