Auto-animate یک آداپتور رسمی برای Marko 6 منتشر کرده است که به توسعهدهندگان اجازه میدهد تغییرات لیست را تنها با یک تگ و بدون نیاز به کد سفارشی انیمیت کنند. این بسته از طریق npm نصب میشود، با نام AutoAnimate ایمپورت میگردد و برای موارد افزودن، حذف و تغییر ترتیب، بهصورت آماده (out-of-the-box) کار میکند.
چرا Marko به این نیاز داشت
مدل رندرینگ Marko مرحله معمول hydration را نادیده میگیرد. سرور HTML را استریم میکند، کلاینت دقیقاً از همان نقطهای که سرور رها کرده است، «ادامه» میدهد و هیچ رندر دومی برای بازسازی درخت کامپوننت انجام نمیشود. از آنجایی که این فریمورک تقریباً بدون هیچ جاوااسکریپتی عرضه میشود، هر کتابخانه اضافی که یک runtime سنگین تزریق کند، آن مزیت را از بین میبرد.
آداپتور جدید مستقیماً به گرههای واقعی DOM که Marko تحویل میدهد، متصل میشود. این آداپتور یک MutationObserver ایجاد میکند — یک API مرورگر که تغییرات DOM را زیر نظر میگیرد — و هر زمان که دادههای زیربنایی لیست تغییر کنند، منطق انتقال (transition) auto-animate را فعال میکند. در عمل، توسعهدهندگان فقط باید دادههای خود را تغییر دهند؛ DOM بهطور خودکار بهروزرسانی شده و انیمیت میشود.
شروع به کار
بسته اصلی را نصب کنید
npm install @formkit/auto-animateآداپتور مخصوص Marko را دریافت کنید
import AutoAnimate from "@formkit/auto-animate/marko"عنصر والد لیست را با
<AutoAnimate>محصور کنید.
تمام شد. بدون هوک، بدون دایرکتیو اضافی و بدون مدیریت دستی چرخه حیات (lifecycle).
نکتهای برای Vite
پروژههای جدید Vite گاهی اوقات خطای import برای این آداپتور میدهند. افزودن عبارت زیر به vite.config.ts این مشکل را حل میکند:
optimizeDeps: {
exclude: ["@formkit/auto-animate"]
}
این استثنا باعث میشود پلاگین خودِ Marko به جای بهینهساز Vite، مدیریت بسته را بر عهده بگیرد.
آنچه توسعهدهندگان به دست میآورند
- حجم بسیار کم – این آداپتور فقط کدهای مورد نیاز برای مشاهده تغییرات DOM را اضافه میکند و حجم باندلِ از قبل سبکِ Marko را افزایش نمیدهد.
- فعال/غیرفعال کردن واکنشگرا – یک ویژگی (attribute) واکنشگرای ساده میتواند انیمیشنها را در زمان اجرا فعال یا غیرفعال کند.
- بدون پیچیدگی اضافی – نیازی به نوشتن منطق انیمیشن برای هر آیتم یا مدیریت هوکهای mount/unmount نیست.
- پاکسازی خودکار – این تگ وقتی کامپوننت unmount میشود، observer خود را از بین میبرد و از نشت حافظه (memory leaks) جلوگیری میکند.
یک دمو زنده، تمام API را از جمله پلاگینهای اختیاری برای جلوههای bounce و spring-style نمایش میدهد. لینک سندباکس در اعلان اصلی ارائه شده است.
معایب احتمالی
این آداپتور بر انیمیشنهای لیست تمرکز دارد؛ هماهنگیهای پیچیدهتر (مثلاً ورود پلهای یا staggered عناصر نامرتبط) همچنان به کد سفارشی یا کتابخانه دیگری نیاز دارد. توسعهدهندگانی که از Vite استفاده میکنند باید تغییر تنظیمات مذکور را به خاطر بسپارند، در غیر این صورت با خطای import مواجه میشوند. در نهایت، از آنجایی که این مکانیسم به MutationObserver متکی است، محیطهای فاقد DOM کامل (مانند تستهای رندرینگ سمت سرور یا SSR) انیمیشنها را مشاهده نخواهند کرد، هرچند این موضوع باعث خرابی رابط کاربری نیز نمیشود.
آنچه در آینده باید منتظر آن بود
نگهدارندگان Auto-animate به آداپتورهای اضافی برای سایر فریمورکهایی که از فلسفه «ادامه از HTML» مارکو پیروی میکنند، اشاره کردهاند. اگر پلاگین Marko محبوب شود، ممکن است در ماههای آینده شاهد افزونههای ارائهشده توسط جامعه کاربری باشیم — مانند پشتیبانی از کشیدن و رها کردن (drag-and-drop) یا ادغام با کتابخانههای مدیریت وضعیت (state-management).
نتیجهگیری: با ترکیب موتور انتقال (transition) بیانی (declarative) auto-animate با رویکرد حداقل زمان اجرا (minimal-runtime) در Marko، این آداپتور جدید انیمیشنهای لیستی را ارائه میدهد که تقریباً هیچ هزینهای از نظر حجم باندل ندارند و به هیچ کد اضافی نیاز ندارند؛ و تجربه توسعهدهنده را به اندازه خودِ فریمورک، بسیار روان نگه میدارد.