🟢 Lesson 11 — Transitions & Animations

1. <transition> — CSS Classes

Vue က transition ဖြစ်တဲ့ အဆင့်တိုင်းမှာ class တွေ auto ထည့်ပေးတယ်

<transition name="fade">
  <div v-if="show">Content</div>
</transition>

/* Enter → Element ဝင်လာတဲ့ animation */
.fade-enter-from   { opacity: 0; }       /* start state */
.fade-enter-active { transition: opacity 0.5s; }
.fade-enter-to     { opacity: 1; }       /* end state (default, optional) */

/* Leave → Element ထွက်သွားတဲ့ animation */
.fade-leave-from   { opacity: 1; }       /* start (default, optional) */
.fade-leave-active { transition: opacity 0.5s; }
.fade-leave-to     { opacity: 0; }       /* end state */

2. Fade Transition

.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
.fade-enter-from,   .fade-leave-to     { opacity: 0; }

3. Different Transition Effects

4. Transition mode — out-in vs in-out

<transition name="fade" mode="out-in">
  <component :is="current"></component>
</transition>

mode="out-in"  → ဟောင်းက ထွက်ပြီးမှ အသစ် ဝင် (most common ✅)
mode="in-out"  → အသစ် ဝင်ပြီးမှ ဟောင်း ထွက်
(no mode)      → တပြိုင်နက် ဖြစ် (overlap)

5. <transition-group> — List Animation

List items တွေ add/remove/sort လုပ်တာကို animate လုပ်ဖို့

<transition-group name="list" tag="div">
  <div v-for="item in items" :key="item.id">
    {{ item.text }}
  </div>
</transition-group>

.list-enter-active, .list-leave-active { transition: all 0.4s; }
.list-enter-from { opacity: 0; transform: translateX(-30px); }
.list-leave-to   { opacity: 0; transform: translateX(30px); }
.list-move       { transition: transform 0.4s; }  /* ← sort animation */

6. appear — Initial Render Animation

Page load ဖြစ်ပြီး component ပထမဆုံး render ဖြစ်တဲ့အချိန်မှာ animate လုပ်

<transition name="appear" appear>
  <div>I animate on first render!</div>
</transition>

.appear-enter-active { transition: all 0.8s ease; }
.appear-enter-from   { opacity: 0; transform: translateY(40px); }

7. Real Use — Notification Toasts