Enter and leave transitions in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of <transition> in Vue?

The <transition> component in Vue wraps elements or components to apply enter and leave animations when they appear or disappear from the DOM.

intermediate

Name the CSS classes Vue automatically applies during an enter transition.

Vue applies these classes in order: v-enter-from, v-enter-active, and v-enter-to to control the start, active, and end states of the enter animation.

beginner

How do you trigger a leave transition in Vue?

A leave transition happens when a condition controlling the element/component becomes false and Vue removes it from the DOM, applying v-leave-from, v-leave-active, and v-leave-to classes for animation.

intermediate

What role does the appear attribute play in Vue transitions?

Adding the appear attribute to a <transition> makes Vue apply enter transition classes when the element first renders, not just on later insertions.

advanced

How can you customize transition class names in Vue?

You can set custom class names using props like <code>enter-from-class</code>, <code>enter-active-class</code>, <code>leave-to-class</code>, etc., on the <code>&lt;transition&gt;</code> component.

Which Vue component is used to add enter and leave animations?

A <effect>

B <animate>

C <motion>

D <transition>

The component is the built-in Vue component for handling enter and leave animations.

What class does Vue apply at the start of an element's enter transition?

A v-enter-from

B v-leave-to

C v-enter-active

D v-leave-from

The v-enter-from class sets the initial state before the enter animation begins.

When does a leave transition occur in Vue?

A When the page loads

B When an element is added to the DOM

C When an element is removed from the DOM

D When a component is mounted

Leave transitions happen when Vue removes an element from the DOM, animating its exit.

What does the appear attribute do in a Vue transition?

A Triggers enter animation on initial render

B Disables all animations

C Makes leave animations faster

D Repeats the animation infinitely

The appear attribute makes the enter animation run when the element first appears on the page.

How can you change the default transition class names in Vue?

A By adding classes to the parent element

B By setting props like enter-from-class on <transition>

C By using inline styles only

D By editing Vue source code

Vue allows custom class names via props on the component for flexible styling.

Explain how Vue uses CSS classes to animate an element entering and leaving the DOM.

Think about the start, active, and end states of animations.

Describe how you would add a fade-in effect when a component first appears using Vue transitions.

Focus on the appear attribute and CSS opacity.

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