The Transition Component
v-enter-from, v-enter-active, v-enter-to, v-leave-* classes, name prop for custom classes.
What the Transition Component Does
Vue ships a built-in <Transition> component that applies enter/leave animations to a single element or component when it is inserted or removed via v-if or v-show.
It does not render any extra DOM element itself - it only manages CSS classes and timing on its child.
<Transition>
<p v-if="show">Hello Vue</p>
</Transition>Single Element Only
<Transition> expects exactly one direct child. Wrapping multiple sibling elements will not work - use <TransitionGroup> for lists instead.
The child must be toggled with v-if, v-show, or a dynamic component.
<!-- valid: one child -->
<Transition>
<div v-if="open" class="panel">Content</div>
</Transition>All lessons in this course
- The Transition Component
- CSS Transitions and Animations
- JavaScript Transition Hooks
- TransitionGroup for List Animations