Vue’s <Transition> wraps elements entering or leaving the DOM and applies CSS classes automatically—v-enter-active, v-leave-to, and friends.
Single element rule
<Transition> expects one direct child. Toggle visibility with v-if or swap keys to animate between states.
Named transitions
Use the name prop (name="fade") to prefix classes as fade-enter-active instead of v-enter-active.
When to skip
Long lists and heavy tables rarely need per-row transitions—prefer subtle opacity on modals and route changes.
Self-check
- Which directive pairs with Transition for enter/leave?
- What does the
nameprop change?
Challenge
Fade a notice
- Click Show/Hide and watch opacity animate.
- Inspect classes toggled on the paragraph during the transition.
Done when: notice fades in and out instead of popping instantly.