Auto-Animate wprowadza adapter dla Marko 6: animuj listy za pomocą jednego tagu

Auto-Animate wydało swój pierwszy oficjalny adapter dla Marko 6, umożliwiając programistom animowanie zmian w listach za pomocą pojedynczego tagu i bez dodatkowego kodu JavaScript. Ten krok jest istotny, ponieważ eliminuje boilerplate, który sprawiał, że wprowadzanie ruchu w projektach Marko wydawało się wymagającym, specjalnym zadaniem.

Model renderowania Marko pomija krok „hydracji” po stronie klienta, na którym polegają takie frameworki jak React czy Vue. Po wysłaniu HTML przez serwer, Marko po prostu kontynuuje pracę z tym znacznikiem w miejscu, co pozwala zachować bardzo małe rozmiary paczek — runtime zajmuje około 7 KB po kompresji gzip. Ten sam skrót blokuje jednak wiele bibliotek animacji, które czekają na renderowanie po stronie klienta, zanim będą mogły podpiąć efekty. Bez dostępu do już istniejącego DOM, programiści musieli tradycyjnie pisać własny kod dla każdej aktualizacji listy.

Nowy adapter omija to ograniczenie, podpinając się pod cykl życia onMount w Marko. Gdy komponent jest montowany, adapter tworzy MutationObserver, który obserwuje węzeł nadrzędny listy pod kątem zmian. Gdy elementy są dodawane, filtrowane lub mieszane, obserwator uruchamia wbudowany silnik przejść auto-animate, automatycznie zapewniając płynne animacje wejścia, wyjścia i zmiany kolejności. Wszystko to dzieje się za pomocą pojedynczego tagu <auto-animate>.

Tag przyjmuje trzy atrybuty:

• parent – zmienna tagu Marko wskazująca na kontener listy.
• options – obiekt zawierający ustawienia czasu trwania, wygładzania (easing) i innych parametrów czasowych.
• enabled – reaktywna wartość boolean, która może włączać lub wyłączać animacje w czasie rzeczywistym.

Ponieważ enabled jest reaktywny, programiści mogą powiązać go z dowolną wartością stanu i przełączać ruch bez ingerencji w DOM lub przepisywania handlerów. Dzięki temu adapter oferuje większą elastyczność niż statyczna dyrektywa, pozostając niewidocznym dla reszty drzewa komponentów.

W przypadku zespołów korzystających z Vite, pakiet może powodować ostrzeżenie o „unresolved import”. Dodanie poniższego fragmentu do vite.config.ts rozwiązuje ten problem:

optimizeDeps: {
  exclude: ["@formkit/auto-animate"]
}

To mówi Vite, aby pozwolił wtyczce Marko obsłużyć import, zamiast próbować go wstępnie pakować (pre-bundle).

Praktyczna korzyść jest natychmiastowa. Typową listę Marko, która wcześniej wymagała użycia hooka useEffect, ręcznego przełączania klas i kilku linii kodu animacji, można teraz zapisać jako:

<auto-animate parent=items enabled=showAnimations options={duration: 300}>
  <ul>
    $ for|item| of=items
      <li>${item.name}</li>
    $ end
  </ul>
</auto-animate>

Bez dodatkowego JavaScriptu, bez zwiększania wagi paczki i z tym samym płynnym ruchem, który auto-animate zapewnia dla innych frameworków.

Kto zyskuje, kto obserwuje

Zespoły front-endowe, które już przyjęły Marko, zyskują gotowe rozwiązanie dla częstego wzorca UI — dynamicznych list. Lekka natura adaptera zachowuje charakterystyczną dla Marko cechę małych paczek, co jest kluczowe dla stron krytycznych pod względem wydajności. Z drugiej strony, adapter skupia się obecnie na mutacjach list; programiści potrzebujący niestandardowej kontroli osi czasu lub złożonej choreografii wciąż będą musieli polegać na własnym kodzie lub innej bibliotece.

Na co warto czekać

Adapter jest oprogramowaniem open-source i posiada już demo w sandboxie, do którego link znajduje się w notatkach z wydania. Opinie społeczności prawdopodobnie ukształtują przyszłe rozszerzenia, takie jak wsparcie dla reorganizacji siatek (grid reflows) czy integracja z nadchodzącymi przejściami na poziomie komponentów w Marko. Jeśli krzywa adopcji odzwierciedli szybkie przyjęcie auto-animate w React i Vue, możemy spodziewać się szerszego trendu w kierunku ruchu „zero-code” w całym ekosystemie UI JavaScript.

Podsumowanie: Adapter Auto-Animate dla Marko 6 zmienia historycznie uciążliwe zadanie — animowanie list renderowanych po stronie serwera — w pojedynczy deklaratywny tag, zachowując minimalny rozmiar paczki Marko i dając programistom natychmiastową, przełączalną warstwę ruchu.