Auto-Animate Melancarkan Adapter Marko 6, Animasi Senarai dengan Satu Tag

Auto-Animate telah melancarkan adapter rasmi pertamanya untuk Marko 6, membolehkan pembangun menganimasikan perubahan senarai dengan satu tag sahaja tanpa JavaScript tambahan. Langkah ini penting kerana ia menghapuskan kod lewah (boilerplate) yang selama ini menjadikan animasi dalam projek Marko terasa seperti satu usaha khas.

Model rendering Marko melangkau langkah “hydration” di bahagian klien yang bergantung kepada rangka kerja seperti React atau Vue. Selepas pelayan menghantar HTML, Marko hanya menyambung markup tersebut di tempatnya, yang mengekalkan saiz bundle yang sangat kecil—kira-kira 7 KB gzipped untuk runtime. Walau bagaimanapun, jalan pintas yang sama ini menyekat banyak perpustakaan animasi yang menunggu render di bahagian klien sebelum kesan dapat dipasang. Tanpa hook ke dalam DOM yang sedia ada, pembangun secara tradisinya perlu menulis kod tersuai untuk setiap kemas kini senarai.

Adapter baharu ini mengelak had tersebut dengan menggunakan hook pada kitaran hayat onMount Marko. Apabila komponen dipasang (mount), adapter tersebut mencipta MutationObserver yang memerhati nod induk senarai untuk sebarang perubahan. Apabila item dimasukkan, ditapis, atau disusun semula, pemerhati tersebut akan mencetuskan enjin transisi terbina dalam auto-animate, memberikan animasi kemasukan, keluar, dan penyusunan semula yang lancar secara automatik. Semua itu berlaku di sebalik satu tag <auto-animate> sahaja.

Tag tersebut menerima tiga atribut:

• parent – pemboleh ubah tag Marko yang merujuk kepada bekas senarai (list container).
• options – satu objek untuk tetapan tempoh (duration), easing, dan tetapan masa yang lain.
• enabled – boolean reaktif yang boleh menghidupkan atau mematikan animasi semasa runtime.

Oleh kerana enabled adalah reaktif, pembangun boleh mengikatnya (bind) kepada sebarang nilai keadaan (state) dan menukar gerakan tanpa menyentuh DOM atau menulis semula pengendali (handlers). Oleh itu, adapter ini menawarkan lebih fleksibiliti berbanding arahan (directive) statik sambil kekal tidak kelihatan kepada baki pokok komponen (component tree).

Bagi pasukan yang menggunakan Vite, pakej ini boleh menyebabkan amaran “unresolved import”. Menambah perkara berikut ke dalam vite.config.ts akan menyelesaikan isu tersebut:

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

Ini memberitahu Vite untuk membiarkan plugin Marko mengendalikan import tersebut dan bukannya cuba melakukan pembungkusan awal (pre-bundle).

Hasil praktikalnya dapat dilihat dengan segera. Senarai Marko tipikal yang sebelum ini memerlukan hook useEffect, pertukaran kelas manual, dan beberapa baris kod animasi kini boleh ditulis sebagai:

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

Tiada JavaScript tambahan, tiada beban bundle tambahan, dan gerakan lancar yang sama seperti yang disediakan oleh auto-animate untuk rangka kerja lain.

Siapa yang mendapat manfaat, siapa yang memerhati

Pasukan front-end yang telah pun menggunakan Marko mendapat penyelesaian sedia ada untuk corak UI yang kerap berlaku—senarai dinamik. Sifat adapter yang ringan ini mengekalkan ciri khas Marko iaitu bundle yang kecil, yang sangat penting untuk laman web yang mementingkan prestasi. Sebaliknya, adapter ini buat masa ini hanya tertumpu pada mutasi senarai; pembangun yang memerlukan kawalan garis masa (timeline) tersuai atau koreografi yang kompleks masih perlu bergantung kepada kod tersuai atau perpustakaan lain.

Apa yang perlu diperhatikan seterusnya

Adapter ini adalah sumber terbuka dan sudah mempunyai sandbox demo yang dipautkan daripada nota keluaran. Maklum balas komuniti berkemungkinan besar akan membentuk sambungan masa hadapan, seperti sokongan untuk aliran semula grid (grid reflows) atau integrasi dengan transisi peringkat komponen Marko yang akan datang. Jika lengkung penggunaan mencerminkan pengambilan pantas auto-animate dalam React dan Vue, kita mungkin akan melihat dorongan yang lebih luas untuk gerakan “zero-code” merentasi ekosistem UI JavaScript.

Rumusan: Adapter Marko 6 Auto-Animate mengubah tugas yang secara sejarahnya sukar—menganimasikan senarai yang dirender oleh pelayan—menjadi satu tag deklaratif tunggal, mengekalkan saiz bundle minimal Marko sambil memberikan lapisan gerakan yang pantas dan boleh diubah (toggle-able) kepada pembangun.