Auto-Animate Launches Marko 6 Adapter, Animates Lists with One Tag

Auto-Animate випустив свій перший офіційний адаптер для Marko 6, що дозволяє розробникам анімувати зміни у списках за допомогою одного тегу та без додаткового JavaScript. Цей крок є важливим, оскільки він усуває шаблонний код, через який анімація в проєктах на Marko тривалий час здавалася складним окремим завданням.

Модель рендерингу Marko пропускає етап клієнтської «гідрації» (hydration), на який покладаються такі фреймворки, як React або Vue. Після того, як сервер надсилає HTML, Marko просто продовжує роботу з цією розміткою на місці, що дозволяє тримати розмір бандлів крихітним — приблизно 7 КБ у стиснутому вигляді (gzipped) для середовища виконання (runtime). Однак цей самий підхід блокує роботу багатьох бібліотек анімації, які чекають на клієнтський рендеринг, перш ніж зможуть прикріпити ефекти. Без доступу до вже наявного DOM розробникам традиційно доводилося писати власний код для кожного оновлення списку.

Новий адаптер обходить це обмеження, підключаючись до життєвого циклу onMount у Marko. Коли компонент монтується, адаптер створює MutationObserver, який стежить за змінами у батьківському вузлі списку. Коли елементи додаються, фільтруються або переміщуються, спостерігач запускає вбудований рушій переходів auto-animate, автоматично забезпечуючи плавні анімації появи, зникнення та перевпорядкування. Усе це відбувається за допомогою одного тегу <auto-animate>.

Тег приймає три атрибути:

• parent – змінна тегу Marko, яка вказує на контейнер списку.
• options – об'єкт для налаштування тривалості, згладжування (easing) та інших параметрів часу.
• enabled – реактивна булева змінна, яка дозволяє вмикати або вимикати анімацію під час виконання.

Оскільки enabled є реактивним, розробники можуть прив'язати його до будь-якого значення стану та перемикати анімацію, не торкаючись DOM і не переписуючи обробники. Таким чином, адаптер пропонує більше гнучкості, ніж статична директива, залишаючись при цьому непомітним для решти дерева компонентів.

Для команд, які використовують Vite, пакет може викликати попередження про «unresolved import» (нерозв'язаний імпорт). Додавання наступного коду до vite.config.ts вирішує цю проблему:

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

Це вказує Vite дозволити плагіну Marko обробити імпорт, замість того, щоб намагатися виконати його попереднє пакування (pre-bundle).

Практична вигода є миттєвою. Типовий список Marko, який раніше потребував хука useEffect, ручного перемикання класів і кількох рядків коду для анімації, тепер можна написати так:

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

Жодного додаткового JavaScript, жодного збільшення ваги бандла і та сама плавна анімація, яку auto-animate надає для інших фреймворків.

Хто виграє, а хто спостерігатиме

Фронтенд-команди, які вже перейшли на Marko, отримують готове рішення для частого патерну UI — динамічних списків. Легкість адаптера зберігає головну особливість Marko — крихітний розмір бандлів, що є критично важливим для сайтів, де важлива продуктивність. З іншого боку, наразі адаптер зосереджений на змінах у списках; розробникам, яким потрібен спеціальний контроль часових шкал (timeline control) або складна хореографія анімацій, все ще доведеться звертатися до власного коду або іншої бібліотеки.

За чим стежити далі

Адаптер є відкритим (open-source), і в примітках до релізу вже є посилання на демо-пісочницю. Відгуки спільноти, ймовірно, визначать майбутні розширення, такі як підтримка переформатування сітки (grid reflows) або інтеграція з майбутніми переходами на рівні компонентів у Marko. Якщо крива впровадження повторить швидке зростання auto-animate у React та Vue, ми можемо побачити ширший рух до «zero-code» анімації в усій екосистемі JavaScript UI.

Підсумок: Адаптер Auto-Animate для Marko 6 перетворює історично складне завдання — анімацію списків, що рендериться на сервері — на один декларативний тег, зберігаючи мінімальний розмір бандла Marko та надаючи розробникам миттєвий шар анімації, який можна вмикати та вимикати.