data-show, data-enter, data-leave, data-transition

ภาพรวม

animation directives ชุดนี้เป็นสะพานเชื่อม TemplateManager เข้ากับ AnimationManager

ใช้เมื่อคุณต้องการให้ animation ถูกประกาศไว้ใน template โดยไม่ต้องเขียน JavaScript เฉพาะทาง

data-show

<aside data-show="panelOpen"
       data-show-animation="fade"
       data-show-duration="200">
  ...
</aside>

• data-show คือ expression ที่ใช้ตัดสินว่าแสดงหรือซ่อน
• data-show-animation ใช้เลือกชื่อ animation
• data-show-duration กำหนดระยะเวลาเป็นมิลลิวินาที

ข้อสำคัญ: data-show ต้องเป็น expression แนว boolean เช่น panelOpen ไม่ใช่ชื่อ animation

data-enter

<section data-enter="slideUp"
         data-enter-duration="350"
         data-enter-threshold="0.2">
  ...
</section>

• animation จะเล่นเมื่อ element เข้ามาอยู่ใน viewport
• data-enter-repeat ใช้ให้ observer ทำงานต่อ ไม่เล่นแค่ครั้งเดียว

data-leave

<section data-leave="fade"
         data-leave-duration="250"
         data-leave-threshold="0.1">
  ...
</section>

• animation จะเล่นเมื่อ element หลุดออกจาก viewport

data-transition

<div data-transition="activeTab"
     data-transition-animation="fade"
     data-transition-duration="180">
  ...
</div>

• expression จะถูกประเมินแบบ reactive
• เมื่อค่าที่ประเมินได้เปลี่ยน AnimationManager จะเล่น transition ที่ตั้งไว้ใหม่

ข้อควรระวัง

1. ใช้แนวคิด data-hide แบบเดิม

ปัจจุบัน TemplateManager ไม่มี directive ชื่อ data-hide แล้ว ให้ใช้ data-show คู่กับ animation option แทน

2. ส่งชื่อ animation ไปให้ data-show

<!-- ❌ ผิด -->
<div data-show="fadeIn"></div>

<!-- ✅ ถูก -->
<div data-show="isOpen" data-show-animation="fade"></div>

3. คิดว่าต้อง cleanup เอง

TemplateManager จะล้าง reactive animation updates และ viewport observers ให้อัตโนมัติเมื่อ element ถูก bind ใหม่หรือถูกลบ

ที่เกี่ยวข้อง

• AnimationManager - runtime animation API
• data-if - render DOM ตามเงื่อนไข
• data-on - เปลี่ยน state จาก event