Enter and leave transitions in Vue - Mini Project: Build & Apply

Enter and Leave Transitions in Vue

📖 Scenario: You are building a simple Vue app where a message appears and disappears with smooth animations when you toggle a button.

🎯 Goal: Create a Vue component that shows a message with fade-in and fade-out transitions when toggled.

📋 What You'll Learn

Use Vue 3.4+ with Composition API and <script setup>

Create a reactive boolean variable called showMessage to control visibility

Use the <transition> component with name="fade" to wrap the message

Define CSS classes for fade-enter-active, fade-leave-active, fade-enter-from, and fade-leave-to to create fade effect

Add a button that toggles showMessage when clicked

💡 Why This Matters

🌍 Real World

Transitions make user interfaces feel smooth and polished by animating changes like showing or hiding elements.

💼 Career

Understanding Vue transitions is important for frontend developers to create engaging and accessible web apps.

1

Setup Vue component and reactive variable

Create a Vue component with <script setup> and define a reactive boolean variable called showMessage initialized to false.

Vue

// Define reactive variable showMessage initialized to false
// Your code here

Hint

Use ref(false) to create a reactive boolean variable named showMessage.

2

Add button to toggle the message

Add a button element with a @click event that toggles the showMessage variable between true and false. The button text should be "Toggle Message".

Vue

import { ref } from 'vue'
const showMessage = ref(false)



  
  

Hint

Use @click="showMessage = !showMessage" on the button to toggle the boolean.

3

Wrap message with transition component

Inside the <template>, add a <transition> component with name="fade" that wraps a <p> element containing the text "Hello, Vue transitions!". Use v-if="showMessage" on the <p> to show or hide it.

Vue

import { ref } from 'vue'
const showMessage = ref(false)



  Toggle Message
  
  

Hint

Use <transition name="fade"> to wrap the paragraph with v-if="showMessage".

4

Add CSS for fade transitions

Add CSS styles for the fade transition: define .fade-enter-active and .fade-leave-active with transition: opacity 0.5s ease, and .fade-enter-from and .fade-leave-to with opacity: 0. This will create a smooth fade effect when the message appears and disappears.

Vue

import { ref } from 'vue'
const showMessage = ref(false)



  Toggle Message
  
    Hello, Vue transitions!
  



/* Add fade transition CSS here */
/* Your code here */

Hint

Use CSS classes with the prefix .fade- to define the fade animation states.

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