Auto-animate ได้ปล่อย adapter อย่างเป็นทางการสำหรับ Marko 6 ช่วยให้นักพัฒนาสามารถทำแอนิเมชันการเปลี่ยนแปลงของรายการ (list changes) ได้ด้วย tag เพียงตัวเดียวโดยไม่ต้องเขียนโค้ดเพิ่มเติม แพ็กเกจนี้สามารถติดตั้งผ่าน npm, นำเข้าด้วย AutoAnimate และพร้อมใช้งานได้ทันทีสำหรับการเพิ่ม (additions), การลบ (removals) และการจัดลำดับใหม่ (reorders)

ทำไม Marko ถึงต้องการสิ่งนี้

โมเดลการเรนเดอร์ของ Marko จะข้ามขั้นตอน hydration ตามปกติ โดยเซิร์ฟเวอร์จะสตรีม HTML และไคลเอนต์จะ "resume" ต่อจากจุดที่เซิร์ฟเวอร์หยุดไว้พอดี โดยไม่มีการเรนเดอร์รอบที่สองเพื่อสร้าง component tree ขึ้นมาใหม่ เนื่องจากเฟรมเวิร์กนี้มาพร้อมกับ JavaScript ที่น้อยมาก การเพิ่มไลบรารีใดๆ ที่มีการฉีด runtime ขนาดใหญ่เข้าไปจะทำให้ข้อดีนั้นหายไป

adapter ตัวใหม่นี้จะเชื่อมต่อโดยตรงกับ real DOM nodes ที่ Marko ส่งมาให้ โดยจะสร้าง MutationObserver ซึ่งเป็น browser API ที่คอยเฝ้าดูการเปลี่ยนแปลงของ DOM และจะกระตุ้นตรรกะการเปลี่ยนผ่าน (transition logic) ของ auto-animate ทุกครั้งที่ข้อมูลพื้นฐานของรายการมีการเปลี่ยนแปลง (mutate) ในทางปฏิบัติ นักพัฒนาเพียงแค่ต้องเปลี่ยนข้อมูล (mutate data) เท่านั้น ส่วน DOM จะอัปเดตและทำแอนิเมชันให้โดยอัตโนมัติ

เริ่มต้นใช้งาน

  1. ติดตั้งแพ็กเกจหลัก 

    npm install @formkit/auto-animate

  2. ดึง adapter เฉพาะสำหรับ Marko เข้ามา 

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

  3. ครอบ element พ่อของรายการด้วย <AutoAnimate>.

เพียงเท่านี้ก็เรียบร้อย ไม่ต้องใช้ hooks, ไม่ต้องมี directives เพิ่มเติม และไม่ต้องจัดการ lifecycle ด้วยตัวเอง

เคล็ดลับสำหรับ Vite

โปรเจกต์ Vite ใหม่บางครั้งอาจเกิดข้อผิดพลาดในการ import adapter การเพิ่มโค้ดต่อไปนี้ลงใน vite.config.ts จะช่วยแก้ปัญหานี้ได้:

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

การยกเว้นนี้จะช่วยให้ปลั๊กอินของ Marko เองเป็นผู้จัดการแพ็กเกจนี้ แทนที่จะเป็น optimizer ของ Vite

สิ่งที่นักพัฒนาจะได้รับ

  • ขนาดเล็กมาก (Tiny footprint) – adapter นี้เพิ่มเฉพาะโค้ดที่จำเป็นสำหรับการเฝ้าดู DOM mutations เท่านั้น โดยไม่ทำให้ bundle size ของ Marko ที่เบาอยู่แล้วบวมขึ้น
  • การเปิด/ปิดแบบ Reactive – สามารถใช้ reactive attribute ง่ายๆ เพื่อเปิดหรือปิดแอนิเมชันในขณะรันไทม์ได้
  • ไม่ต้องมีพิธีรีตอง (Zero ceremony) – ไม่จำเป็นต้องเขียนตรรกะแอนิเมชันสำหรับแต่ละไอเทม หรือจัดการ mount/unmount hooks
  • การล้างข้อมูลอัตโนมัติ (Automatic cleanup) – tag จะทำลาย observer ของมันเมื่อ component ถูก unmount เพื่อป้องกันปัญหา memory leaks

เดโมแบบสดแสดงให้เห็นถึง API ทั้งหมด รวมถึงปลั๊กอินเสริมสำหรับเอฟเฟกต์แบบ bounce และ spring-style โดยลิงก์ sandbox มีระบุไว้ในประกาศต้นฉบับ

ข้อเสียที่อาจเกิดขึ้น

adapter นี้เน้นไปที่แอนิเมชันของรายการ (list animations) เท่านั้น หากต้องการการจัดวางลำดับที่ซับซ้อนกว่านี้ (เช่น การปรากฏขึ้นแบบ staggered ของ element ที่ไม่เกี่ยวข้องกัน) ยังคงต้องใช้โค้ดที่เขียนขึ้นเองหรือไลบรารีอื่น นักพัฒนาที่ใช้ Vite ต้องจำไว้ว่าต้องปรับแต่งค่าคอนฟิก มิฉะนั้นจะพบข้อผิดพลาดในการ import สุดท้าย เนื่องจากกลไกนี้พึ่งพา MutationObserver สภาพแวดล้อมที่ไม่มี DOM เต็มรูปแบบ (เช่น การทดสอบ server-side rendering) จะไม่เห็นแอนิเมชัน แต่ก็จะไม่ทำให้ UI พังเช่นกัน

สิ่งที่น่าจับตามองต่อไป

ผู้ดูแล Auto-animate ได้บอกใบ้ถึง adapter เพิ่มเติมสำหรับเฟรมเวิร์กอื่นๆ ที่ใช้ปรัชญา "resume-from-HTML" แบบเดียวกับ Marko หากปลั๊กอินของ Marko ได้รับความนิยม เราอาจได้เห็นส่วนขยายที่สร้างโดยชุมชน เช่น การรองรับ drag-and-drop หรือการรวมเข้ากับไลบรารีการจัดการสถานะ (state-management libraries) ในอีกไม่กี่เดือนข้างหน้า

สรุป: ด้วยการนำ declarative transition engine ของ auto-animate มาผสานเข้ากับแนวทาง minimal-runtime ของ Marko adapter ตัวใหม่นี้จึงมอบแอนิเมชันสำหรับรายการที่แทบไม่เพิ่มขนาด bundle และไม่ต้องเขียนโค้ดเพิ่มเติม ช่วยให้ประสบการณ์ของนักพัฒนายังคงราบรื่นเหมือนกับตัวเฟรมเวิร์กเอง