<Transition> Enter/Leave Transitions
Last updated: 2026-10-22
<Transition> Enter/Leave Transitions
| Group | Built-ins |
|---|---|
| Kind | Component / Element |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<Transition name="fade">
<p v-if="show">content</p>
</Transition>
/* classes: fade-enter-active / fade-enter-from / fade-enter-to (same for leave) */
.fade-enter-active { transition: opacity .3s }
.fade-enter-from { opacity: 0 }⚙️ Arguments
| props | name (class prefix), appear, mode (out-in...), duration and css:false for JS hooks |
|---|
▶ Example
Edit the code below and see the live result:
Output：
Toggling fades the paragraph out and back in over ~0.3s.💡 Key Points
💡 Tip The name prefixes the classes; the default prefix is v-.
⚠️ Warning Exactly one child is allowed — use TransitionGroup for lists.
ℹ️ Note mode="out-in" waits for the leave to finish before entering.
🏷️ Related Built-ins
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why is nothing animating?
A Usually missing CSS or a mismatched class prefix.
Q Can CSS and hooks combine?
A Yes, though css:false leaves control to hooks alone.
Q How about list animations?
A Use <TransitionGroup>, which adds a .move class.
