Auto-animate imetoa adapter rasmi kwa ajili ya Marko 6, ikiruhusu watengenezaji kuendesha (animate) mabadiliko ya orodha kwa kutumia tag moja tu na bila kodi maalum. Pakiti hii inapatikana kupitia npm, inaingizwa kama AutoAnimate na inafanya kazi moja kwa moja kwa ajili ya kuongeza, kuondoa na kupanga upya vitu.

Kwa nini Marko ilihitaji hili

Mtindo wa Marko wa rendering unaruka hatua ya kawaida ya hydration. Seva inatuma HTML, mteja (client) "unaendelea" kuanzia pale hasa ambapo seva ilimaliza, na hakuna rendering ya pili inayojenga upya mti wa vipengee (component tree). Kwa sababu mfumo huu unakuja na JavaScript kidogo sana, maktaba yoyote ya ziada inayoweka runtime nzito itafuta faida hiyo.

Adapter mpya hii inaunganishwa moja kwa moja kwenye node halisi za DOM ambazo Marko tayari inazitoa. Inatengeneza MutationObserver—API ya kivinjari inayofuatilia mabadiliko kwenye DOM—na kuchochea mantiki ya mpito (transition logic) ya auto-animate kila wakati data ya msingi ya orodha inapobadilika. Kiuhalisia, watengenezaji wanapaswa tu kubadilisha data zao; DOM inajisasisha na kuendesha (animate) yenyewe moja kwa moja.

Kuanza

  1. Sakinisha pakiti ya msingi 

    npm install @formkit/auto-animate

  2. Ingiza adapter maalum ya Marko 

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

  3. Zungusha kipengee mzazi wa orodha kwa kutumia <AutoAnimate>.

Haijalishi. Hakuna hooks, hakuna directives za ziada, hakuna usimamizi wa lifecycle wa kumanual.

Kidokezo cha Vite

Miradi mipya ya Vite wakati mwingine hutoa kosa la uingizaji (import error) kwa adapter hiyo. Kuongeza yafuatayo kwenye vite.config.ts kutatatua tatizo hilo:

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

Ubaguzi huo unaruhusu plugin ya Marko yenyewe kushughulikia pakiti hiyo badala ya optimiza ya Vite.

Faida kwa watengenezaji

  • Ukubwa mdogo sana – Adapter hii inaongeza tu kodi inayohitajika kufuatilia mabadiliko ya DOM; haiongezi ukubwa wa bundle ya Marko ambayo tayari ni nyepesi.
  • Ubadilishaji wa reactive – Sifa (attribute) rahisi ya reactive inaweza kuwasha au kuzima animations wakati programu inafanya kazi.
  • Bila usumbufu wowote – Hakuna haja ya kuandika mantiki ya animation kwa kila kipengee au kusimamia hooks za mount/unmount.
  • Usafishaji wa kiotomatiki – Tag hiyo huondoa observer wake wakati kipengee kinapoondolewa (unmounts), kuzuia uvujaji wa kumbukumbu (memory leaks).

Onyesho la moja kwa moja (live demo) linaonyesha API kamili, ikijumuisha plugin za hiari kwa madoido ya bounce na spring-style. Kiungo cha sandbox kimetolewa kwenye tangazo la awali.

Changamoto zinazoweza kutokea

Adapter hii inajikita kwenye animation za orodha; mpangilio tata zaidi (kama vile kuingia kwa vipengele visivyohusiana kwa mpangilio) bado unahitaji kodi