Auto-animate telah melancarkan penyesuai (adapter) rasmi untuk Marko 6, membolehkan pembangun menganimasikan perubahan senarai dengan satu tag sahaja tanpa kod tersuai. Pakej ini boleh dipasang melalui npm, diimport sebagai AutoAnimate dan berfungsi secara terus (out-of-the-box) untuk penambahan, pembuangan dan penyusunan semula.

Mengapa Marko memerlukannya

Model rendering Marko melangkau langkah hidrasi (hydration) yang biasa. Pelayan (server) menyalurkan HTML, klien "menyambung semula" (resumes) tepat dari titik pelayan berhenti, dan tiada render kedua yang membina semula pokok komponen. Oleh kerana rangka kerja (framework) ini hadir dengan hampir tiada JavaScript, sebarang perpustakaan tambahan yang menyuntik runtime yang berat akan menghapuskan kelebihan tersebut.

Penyesuai baharu ini disambungkan terus ke nod DOM sebenar yang telah disediakan oleh Marko. Ia mencipta MutationObserver—satu API pelayar yang memerhati perubahan pada DOM—dan mencetuskan logik peralihan auto-animate setiap kali data asas senarai berubah. Dalam praktiknya, pembangun hanya perlu mengubah data mereka; DOM akan dikemas kini dan dianimasikan secara automatik.

Bermula

  1. Pasang pakej teras 

    npm install @formkit/auto-animate

  2. Masukkan penyesuai khusus Marko 

    import AutoAnimate from "@formkit/auto-animate/marko"

  3. Bungkus elemen induk senarai dengan <AutoAnimate>.

Itu sahaja. Tiada hook, tiada arahan (directives) tambahan, tiada pengurusan kitaran hayat (lifecycle) manual.

Tip Vite

Projek Vite baharu kadangkala mengeluarkan ralat import untuk penyesuai tersebut. Menambah perkara berikut ke dalam vite.config.ts akan menyelesaikannya:

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

Pengecualian ini membolehkan plugin Marko sendiri mengendalikan pakej tersebut berbanding pengoptimum (optimizer) Vite.

Apa yang pembangun perolehi

  • Jejak kecil (Tiny footprint) – Penyesuai ini hanya menambah kod yang diperlukan untuk memerhati mutasi DOM; ia tidak membesarkan saiz bundle Marko yang sedia ada ramping.
  • Suis reaktif (Reactive toggling) – Atribut reaktif yang ringkas boleh menghidupkan atau mematikan animasi semasa runtime.
  • Tanpa kerumitan (Zero ceremony) – Tidak perlu menulis logik animasi bagi setiap item atau menguruskan hook mount/unmount.
  • Pembersihan automatik – Tag tersebut melupuskan pemerhatinya (observer) apabila komponen dinyahpasang (unmounts), sekali gus mengelakkan kebocoran memori (memory leaks).

Demo langsung memaparkan API penuh, termasuk plugin pilihan untuk kesan gaya lantunan (bounce) dan spring. Pautan sandbox disediakan dalam pengumuman asal.

Kekurangan yang mungkin berlaku

Penyesuai ini memfokuskan pada animasi senarai; koreografi yang lebih kompleks (contohnya, kemasukan bertingkat bagi elemen yang tidak berkaitan) masih memerlukan kod tersuai atau perpustakaan yang berbeza. Pembangun yang menggunakan Vite mesti ingat untuk mengubah konfigurasi, atau mereka akan menghadapi ralat import. Akhir sekali, kerana mekanisme ini bergantung pada MutationObserver, persekitaran tanpa DOM penuh (seperti ujian rendering di sebelah pelayan) tidak akan memaparkan animasi, walaupun ia tidak akan merosakkan UI.

Apa yang perlu diperhatikan seterusnya

Penyelenggara auto-animate telah memberi bayangan tentang penyesuai tambahan untuk rangka kerja lain yang berkongsi falsafah "resume-from-HTML" Marko. Jika plugin Marko terbukti popular, kita mungkin akan melihat sambungan sumbangan komuniti—seperti sokongan seret-dan-lepas (drag-and-drop) atau integrasi dengan perpustakaan pengurusan keadaan (state-management)—muncul dalam bulan-bulan akan datang.

Kesimpulan: Dengan menggabungkan enjin peralihan deklaratif auto-animate dengan pendekatan runtime minimal Marko, penyesuai baharu ini memberikan animasi senarai yang hampir tidak menambah saiz bundle dan tidak memerlukan kod tambahan, menjadikan pengalaman pembangun semulus rangka kerja itu sendiri.