How to use transitions in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Adding smooth transitions when elements appear or disappear greatly enhances user experience and makes interfaces feel polished and professional.
With over 12 years of Vue.js experience since 2014 and as the creator of CoreUI, I’ve implemented countless animations in production applications.
Vue 3 provides a built-in Transition component that automatically applies CSS classes during enter and leave phases, making animations straightforward.
This approach requires no external libraries and works with standard CSS transitions or animations.
Wrap elements in the Transition component and define CSS transition classes.
<template>
<button @click='show = !show'>Toggle</button>
<Transition name='fade'>
<p v-if='show'>Hello Vue transitions!</p>
</Transition>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
Best Practice Note
The name prop on Transition sets the prefix for CSS classes. Vue automatically applies six classes: fade-enter-from, fade-enter-active, fade-enter-to, fade-leave-from, fade-leave-active, and fade-leave-to. The -active classes define the transition properties, while -from and -to define start and end states. You can use CSS transitions or keyframe animations. This is the same pattern we use in CoreUI for Vue components to create smooth modal dialogs, dropdown menus, and notification animations.
