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

Need a 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)



  
  

Need a 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
  
  

Need a 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 */

Need a hint?

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