Transition component for animations in Vue - Performance & Optimization

Performance: Transition component for animations

MEDIUM IMPACT

This affects the rendering performance during element entry and exit animations, impacting visual stability and interaction responsiveness.

Animating element appearance and disappearance

Vue

<template>
  <Transition name="fade">
    <div v-if="show">Content</div>
  </Transition>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave-from {
  opacity: 1;
}
</style>

Vue's Transition component batches DOM updates and applies CSS classes to control animation, reducing layout thrashing and improving visual stability.

📈 Performance GainSingle reflow and paint per animation cycle, minimizing layout shifts and improving CLS.

Animating element appearance and disappearance

Vue

<template>
  <div v-if="show" :style="{ transition: 'all 0.5s', opacity: show ? 1 : 0 }">Content</div>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

Directly toggling styles with v-if and inline transitions causes abrupt DOM changes and triggers multiple reflows and repaints.

📉 Performance CostTriggers 2 reflows and 2 paints per toggle, causing jank and layout shifts.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct style toggle with v-if	Insert/remove DOM nodes abruptly	2 per toggle	2 paints per toggle	[X] Bad
Vue Transition component with CSS classes	Batched DOM updates with class toggling	1 per animation	1 paint per animation	[OK] Good

Rendering Pipeline

The Transition component adds and removes CSS classes to trigger CSS animations. This allows the browser to optimize style recalculations and layout changes efficiently.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage due to DOM insertion/removal and style changes

Core Web Vital Affected

CLS

This affects the rendering performance during element entry and exit animations, impacting visual stability and interaction responsiveness.

Optimization Tips

1Use Vue's Transition component to batch DOM updates during animations.

2Animate properties like opacity and transform to avoid layout recalculations.

3Avoid direct style toggling that causes multiple reflows and repaints.

Performance Quiz - 3 Questions

What is the main performance benefit of using Vue's Transition component for animations?

A It increases the number of reflows for smoother animation.

B It batches DOM updates and reduces layout thrashing.

C It disables CSS transitions to speed up rendering.

D It forces synchronous layout recalculations.

DevTools: Performance

How to check: Record a performance profile while toggling the animated element. Look for layout thrashing and paint events in the flame chart.

What to look for: Fewer layout recalculations and paint events indicate better animation performance and smoother transitions.