auto-animate
Animacje bez konfiguracji dla React, Vue, Solid, Svelte i Preact – rozwiązuje 15 znanych błędów
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Auto-animate to lekka biblioteka (3,28 KB) do płynnych animacji list, akordeonów i powiadomień w React, Vue, Solid, Svelte i Preact. Automatycznie obsługuje prefers-reduced-motion dla dostępności. Rozwiązuje 15 dokumentowanych problemów: błędy SSR w Next.js, konflikty React 19 StrictMode, problemy z renderowaniem warunkowym, viewport, drag-and-drop i CSS transform. Wystarczy podłączyć referencję do elementu – reszta działa sama.
Jak używać
Zainstaluj paczkę @formkit/auto-animate w swoim projekcie, używając npm install @formkit/auto-animate lub yarn add @formkit/auto-animate.
W komponentach React utwórz hook useAutoAnimateSafe, który dynamicznie importuje bibliotekę w useEffect. To zapobiega błędom SSR w Next.js i Cloudflare Workers – AutoAnimate wymaga DOM API niedostępnych na serwerze.
Zadeklaruj state dla referencji do elementu nadrzędnego za pomocą useState, a następnie przypisz tę referencję do kontenera, w którym będą się pojawiać animowane elementy (lista, akordeon, toast).
W useEffect sprawdź, czy kod wykonuje się w przeglądarce (typeof window !== 'undefined'), a następnie dynamicznie zaimportuj auto-animate i wywołaj autoAnimate(parent) na elemencie.
Dodawaj lub usuwaj elementy potomne normalnie – biblioteka automatycznie wykryje zmiany i zastosuje płynne przejścia. Nie musisz definiować żadnych klas CSS ani keyframes.
Jeśli używasz warunkowego renderowania rodzica lub masz problemy z drag-and-drop, upewnij się, że referencja do elementu jest zawsze poprawna i że importujesz bibliotekę po stronie klienta, a nie na serwerze.