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.

Practice

1. What is the main purpose of the <transition> component in Vue?

easy

A. To handle user input events

B. To add animations when elements enter or leave the DOM

C. To create reactive data properties

D. To fetch data from an API

Solution

1. Step 1: Understand the role of <transition>

   The <transition> component is designed to wrap elements and apply animations when they appear or disappear.

2. Step 2: Compare with other options

   Fetching data, creating reactive properties, and handling events are unrelated to <transition> functionality.

3. Final Answer:

   To add animations when elements enter or leave the DOM -> Option B

4. Quick Check:

   Enter and leave animations [OK]

Hint: Think: transition means animation on show/hide [OK]

Common Mistakes:

• Confusing transition with data fetching
• Thinking transition handles events
• Mixing transition with reactive data setup

2. Which of the following is the correct way to apply a CSS transition named "fade" to an element in Vue?

easy

A. Content

B. Content

C. Content

D. Content

Solution

1. Step 1: Check correct usage of <transition> with name

   The <transition> component requires a name attribute to link CSS classes, and the element to animate must be inside it with v-if or v-show.

2. Step 2: Validate each option

   <transition name="fade"><div v-if="show">Content</div></transition> correctly wraps the element inside <transition name="fade"> with v-if. Using transition as an attribute on div is invalid, placing v-if on <transition> does not work properly, and using class on div without name on <transition> misses the name attribute.

3. Final Answer:

   <transition name="fade"><div v-if="show">Content</div></transition> -> Option A

4. Quick Check:

   Use <transition name="fade"> wrapper [OK]

Hint: Always put v-if inside <transition name="..."> [OK]

Common Mistakes:

• Putting v-if on <transition> instead of child
• Missing the name attribute on <transition>
• Using transition attribute on div instead of component

3. Given this Vue template and CSS, what happens when show changes from false to true?

<template>
  <transition name="slide">
    <div v-if="show">Hello</div>
  </transition>
</template>

<style>
.slide-enter-active { transition: all 0.5s ease; }
.slide-enter-from { transform: translateX(-100%); opacity: 0; }
.slide-enter-to { transform: translateX(0); opacity: 1; }
</style>

medium

A. The div fades out when shown

B. The div instantly appears without animation

C. The div slides out to the right when shown

D. The div slides in from the left with fading effect

Solution

1. Step 1: Understand the transition classes

   The classes slide-enter-from and slide-enter-to define the start and end states for entering. The div starts translated left and transparent, then moves to normal position and full opacity.

2. Step 2: Analyze the effect when show changes true

   When show becomes true, the div enters with the slide-enter transition, sliding in from left and fading in.

3. Final Answer:

   The div slides in from the left with fading effect -> Option D

4. Quick Check:

   slide-enter-from to slide-enter-to = slide in + fade [OK]

Hint: Enter transitions use -enter-from to -enter-to classes [OK]

Common Mistakes:

• Confusing enter and leave animations
• Ignoring transform and opacity in CSS
• Assuming no animation on v-if change

4. Identify the error in this Vue transition code:

<transition name="fade">
  <div v-show="visible">Content</div>
</transition>

<style>
.fade-leave-active { transition: opacity 0.3s ease; }
.fade-leave-from { opacity: 1; }
.fade-leave-to { opacity: 0; }
</style>

medium

A. The transition name should be "fade-leave" instead of "fade"

B. Using v-show instead of v-if prevents leave transition from running

C. Missing fade-enter classes causes no enter animation

D. The CSS transition duration is too short to see

Solution

1. Step 1: Examine the provided CSS classes

   Only leave transition classes (.fade-leave-active, .fade-leave-from, .fade-leave-to) are defined. No enter classes (.fade-enter-active, .fade-enter-from, .fade-enter-to) are present.

2. Step 2: Determine the impact

   Missing enter classes (.fade-enter-*) means no animation occurs when the element enters (visible changes from false to true). The leave transition works fine with v-show.

3. Final Answer:

   Missing fade-enter classes causes no enter animation -> Option C

4. Quick Check:

   Missing enter classes = no enter animation [OK]

Hint: Define enter-active/from/to for enter animations [OK]

Common Mistakes:

• Thinking v-show prevents leave animations (it doesn't)
• Proposing to change transition name
• Focusing on duration instead of missing classes

5. You want to create a fade transition that only triggers when a list item is removed, not when added. Which approach correctly achieves this in Vue?

hard

A. Use <transition> with only leave-active and leave-from/to CSS classes, no enter classes

B. Use <transition> with enter and leave classes but set v-show instead of v-if

C. Use <transition> with enter classes only and no leave classes

D. Use <transition> with both enter and leave classes and toggle v-if normally

Solution

1. Step 1: Understand transition class roles

   Enter classes control animation when element appears; leave classes control animation when element disappears.

2. Step 2: To animate only removal, define leave classes only

   By omitting enter classes, no animation runs on enter, but leave animations run on removal.

3. Final Answer:

   Use <transition> with only leave-active and leave-from/to CSS classes, no enter classes -> Option A

4. Quick Check:

   Only leave classes = animate removal only [OK]

Hint: Omit enter classes to animate only leave transitions [OK]

Common Mistakes:

• Using v-show prevents leave animations
• Defining enter classes triggers animation on add
• Confusing enter and leave class roles