Vue Animations
Create smooth transitions and animations
✨ What are Vue Animations?
Vue animations use the Transition component to apply smooth effects when elements enter or leave the DOM. You can create fade, slide, and custom animations using CSS classes automatically applied by Vue.
<!-- Simple fade animation -->
<Transition name="fade">
<p v-if="show">Hello!</p>
</Transition>
Animation Concepts
Transition
Animate single element changes
<Transition name="fade">
<div v-if="show">Content</div>
</Transition>CSS Classes
Vue applies transition classes
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}Duration
Control animation timing
<Transition :duration="1000">
<div>Content</div>
</Transition>Custom Effects
Create unique animations
.slide-enter-active {
animation: slide-in 0.5s;
}🔹 Basic Fade Animation
Simple fade in/out effect:
<div id="app">
<button @click="show = !show">Toggle</button>
<Transition name="fade">
<p v-if="show">Hello Vue Animations!</p>
</Transition>
</div>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
<script>
createApp({
data() {
return {
show: true
}
}
}).mount('#app');
</script>Output:
Hello Vue Animations!
🔹 Slide Animation
Slide element from the side:
<div id="app">
<button @click="show = !show">Slide Toggle</button>
<Transition name="slide">
<div v-if="show" class="box">Sliding Box</div>
</Transition>
</div>
<style>
.slide-enter-active,
.slide-leave-active {
transition: all 0.3s ease;
}
.slide-enter-from {
transform: translateX(-100%);
opacity: 0;
}
.slide-leave-to {
transform: translateX(100%);
opacity: 0;
}
.box {
padding: 20px;
background: #42b983;
color: white;
border-radius: 4px;
}
</style>Output:
🔹 Scale Animation
Grow and shrink elements:
<div id="app">
<button @click="show = !show">Scale Toggle</button>
<Transition name="scale">
<div v-if="show" class="card">
<h3>Scaling Card</h3>
<p>This card scales in and out</p>
</div>
</Transition>
</div>
<style>
.scale-enter-active,
.scale-leave-active {
transition: all 0.3s ease;
}
.scale-enter-from,
.scale-leave-to {
transform: scale(0);
opacity: 0;
}
.card {
padding: 20px;
background: white;
border: 2px solid #42b983;
border-radius: 8px;
margin-top: 10px;
}
</style>Output:
Scaling Card
This card scales in and out
🔹 Transition Classes
Vue applies these CSS classes automatically:
Enter Transition:
- v-enter-from: Starting state (before element inserted)
- v-enter-active: Active state (entire enter phase)
- v-enter-to: Ending state (after transition finishes)
Leave Transition:
- v-leave-from: Starting state (when leave triggered)
- v-leave-active: Active state (entire leave phase)
- v-leave-to: Ending state (after transition finishes)
🔹 Bounce Animation
Create a bouncing effect with keyframes:
<div id="app">
<button @click="show = !show">Bounce</button>
<Transition name="bounce">
<div v-if="show" class="ball">🏀</div>
</Transition>
</div>
<style>
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
.ball {
font-size: 48px;
margin-top: 10px;
}
</style>Output:
🔹 Mode Attribute
Control transition timing with mode:
<!-- out-in: Current element leaves first -->
<Transition name="fade" mode="out-in">
<component :is="view"></component>
</Transition>
<!-- in-out: New element enters first -->
<Transition name="fade" mode="in-out">
<component :is="view"></component>
</Transition>- out-in: Current element transitions out first, then new element transitions in
- in-out: New element transitions in first, then current element transitions out