Transition Component in Vue.js
From the Vue.js cheat sheet · Transitions & Animations · verified Jul 2026
Transition Component
Single element/component transitions
vue
<!-- Basic transition -->
<Transition name="fade">
<p v-if="show">Hello</p>
</Transition>
<!-- CSS -->
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
</style>💡 Vue 3 uses -from suffix instead of Vue 2's bare class names
⚡ Use mode="out-in" for smooth component transitions
📌 :css="false" for JavaScript-only transitions
🔥 TransitionGroup for animating lists with automatic move transitions