Enter and leave transitions in Vue - Performance & Optimization

Performance: Enter and leave transitions

MEDIUM IMPACT

This affects the smoothness and speed of element appearance and disappearance on the page, impacting user interaction responsiveness and visual stability.

Animating element enter and leave transitions in Vue

Vue

<template>
  <transition name="fade">
    <div v-if="show" class="box">Content</div>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
  will-change: opacity;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

Transition only opacity, a GPU-accelerated property, avoiding layout recalculations and reducing repaints for smoother animation.

📈 Performance GainSingle composite layer animation, no reflows, resulting in smooth transitions and better input responsiveness.

Animating element enter and leave transitions in Vue

Vue

<template>
  <transition name="fade">
    <div v-if="show" class="box">Content</div>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: all 0.5s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
</style>

Using 'all' in transition triggers layout recalculations and repaints for multiple properties including height, causing multiple reflows and jank.

📉 Performance CostTriggers multiple reflows and repaints per animation frame, causing input delay and visual jank.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Animating 'all' properties including height and margin	Multiple style changes	Multiple reflows per frame	High paint cost due to layout changes	[X] Bad
Animating only opacity with will-change hint	Minimal style changes	No reflows	Low paint cost, GPU compositing	[OK] Good

Rendering Pipeline

Enter and leave transitions update styles triggering the browser to recalculate styles, layout, paint, and composite layers. Animating layout properties causes expensive reflows and repaints, while animating opacity or transform uses the GPU for compositing only.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages when animating layout-affecting properties like height or margin

Core Web Vital Affected

INP, CLS

This affects the smoothness and speed of element appearance and disappearance on the page, impacting user interaction responsiveness and visual stability.

Optimization Tips

1Animate only GPU-accelerated properties like opacity or transform for transitions.

2Avoid animating layout-affecting properties like height or margin to prevent reflows.

3Use 'will-change' CSS property to hint the browser for better animation performance.

Performance Quiz - 3 Questions

Which CSS property is best to animate for smooth enter and leave transitions in Vue?

A opacity

B height

C margin

D width

DevTools: Performance

How to check: Record a performance profile while triggering the transition. Look for layout and paint events during the animation frames.

What to look for: High number of Layout and Paint events indicates costly animations; smooth animations show mostly Composite events.