Animacje wejścia i wyjścia bez biblioteki

Podczas warunkowego renderowania za pomocą {show && } React usuwa element z DOM-u natychmiast po tym, jak wartość show zmieni się na false. Nie ma czasu na animację wyjścia, ponieważ węzeł już nie istnieje.

Animacje wejścia są łatwe; prawdziwym wyzwaniem są animacje wyjścia.

Najprostsze rozwiązanie polega na tym, aby nigdy nie odmontowywać elementu. Należy pozostawić go w renderowanym widoku i podczas ukrywania animować opacity do zera oraz ustawić pointer-events: none, a podczas pokazywania przywrócić wartość jeden.

Zapewnia to płynne zanikanie w obu kierunkach kosztem pozostawienia elementu w DOM-ie.

Aby faktycznie odmontowywać element, można zamodelować małą maszynę stanów z fazami takimi jak mounting, mounted, unmounting i unmounted. Węzeł usuwa się dopiero po zakończeniu animacji wyjścia.

Stan określa, które klasy animacji są stosowane w każdej fazie.

Maszynę stanów można zamknąć w niestandardowym hooku, często nazywanym useMount. Przyjmuje on oczekiwaną widoczność i zwraca informację, czy element powinien znajdować się w DOM-ie, oraz jego bieżącą fazę.

Komponenty pozostają przejrzyste, ponieważ logika odmierzania czasu znajduje się w wielokrotnie używanym hooku.

Zgodnie z popularnymi konwencjami podczas montowania stosuje się najpierw enter, a następnie enter-active, natomiast przy usuwaniu — exit, a potem exit-active. Klasa bazowa określa stan początkowy, a klasa aktywna — stan końcowy wraz z przejściem.

Przełączanie między nimi w odpowiedniej klatce uruchamia animację.

Aby wiedzieć, kiedy kończy się animacja wyjścia, należy nasłuchiwać zdarzenia transitionend na elemencie. Gdy zdarzenie dotyczące wyjścia wystąpi, zmienia się stan na unmounted i usuwa węzeł.

Dzięki temu odmontowanie jest dokładnie powiązane z końcem animacji wizualnej, zamiast opierać się na przybliżonym czasie.

Całą tę logikę można zamknąć w komponencie Transition, który przyjmuje właściwość in oraz elementy podrzędne. Utrzymuje on elementy podrzędne zamontowane przez cały czas trwania animacji wyjścia i stosuje odpowiednie klasy dla każdej fazy.

Wystarczy, że użytkownicy komponentu przełączają in, aby automatycznie uzyskać poprawne animacje wejścia i wyjścia.

Istnieje tu istotny szczegół: przed dodaniem klasy aktywnej należy pozwolić przeglądarce wyrenderować klasę początkową, w przeciwnym razie element przeskoczy bez przejścia. Wywołanie requestAnimationFrame lub wymuszone przeliczenie układu między tymi operacjami gwarantuje, że przejście rzeczywiście się wykona.

Dzięki temu przeglądarka najpierw zarejestruje wartości początkowe.

Biblioteka react-transition-group udostępnia komponenty Transition i CSSTransition, które implementują dokładnie ten wzorzec, w tym cykl życia klas i moment odmontowania.

Własna implementacja odzwierciedla jej podstawowe założenia, dzięki czemu po samodzielnym zbudowaniu takiego rozwiązania łatwo zrozumieć działanie biblioteki.

W przypadku pojedynczego prostego zanikania wystarczy pozostawienie elementu zamontowanego lub niewielki hook, co pozwala uniknąć dodatkowej zależności. Przy wielu skoordynowanych przejściach, listach z dodawaniem i usuwaniem elementów lub złożonym sekwencjonowaniu biblioteka oszczędza czas i pomaga uniknąć błędów brzegowych.

Wybór należy uzależnić od rzeczywistego poziomu złożoności animacji potrzebnego w aplikacji.

Animacje wyjścia wymagają utrzymania elementu do czasu zakończenia animacji — czy to przez nieodmontowywanie go, maszynę stanów z transitionend, czy bibliotekę.

Zrozumienie mechanizmu pozwala wybrać najprostsze rozwiązanie spełniające wymagania.

Dowiedział się Pan, dlaczego animacje wyjścia są trudne, poznał Pan dwa rozwiązania — pozostawienie elementu zamontowanego i maszynę stanów montowania — a także sposób, w jaki transitionend określa moment odmontowania, oraz jak zbudować wielokrotnie używany komponent Transition.

Poznał Pan również sytuacje, w których warto użyć react-transition-group zamiast własnego rozwiązania.