Transition component basics in Vue - Mini Project: Build & Apply

Transition component basics

📖 Scenario: You are building a simple Vue app that shows and hides a message with a smooth fade effect. This makes the app feel friendly and polished, like a light turning on and off gently.

🎯 Goal: Create a Vue component that toggles a message's visibility using the <Transition> component with fade-in and fade-out effects.

📋 What You'll Learn

Create a reactive boolean variable called showMessage initialized to false.

Add a button that toggles showMessage when clicked.

Use the <Transition> component with the name fade to wrap the message.

Define CSS classes for the fade transition: fade-enter-active, fade-leave-active, fade-enter-from, and fade-leave-to.

💡 Why This Matters

🌍 Real World

Transitions make web apps feel smooth and polished by animating changes in the UI, like showing or hiding messages, menus, or dialogs.

💼 Career

Understanding Vue's Transition component is essential for frontend developers to create engaging user experiences with animations.

1

Set up the Vue component and reactive variable

Create a Vue component using <script setup>. Inside it, create a reactive boolean variable called showMessage and set it to false.

Vue

// Create a reactive boolean variable called showMessage and set it to false
// Your code here



  

Need a hint?

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

2

Add a button to toggle the message visibility

In the <template>, add a <button> element with a click event that toggles the showMessage variable using @click="showMessage = !showMessage". 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 the message with the Transition component

Inside the <template>, below the button, add a <Transition> component with the attribute name="fade". Inside it, conditionally render a <p> element with the text Hello, Vue Transition! only when showMessage is true using v-if="showMessage".

Vue

import { ref } from 'vue'

const showMessage = ref(false)



  Toggle Message
   that shows only when showMessage is true -->
  

Need a hint?

Use <Transition name="fade"> and inside it a <p v-if="showMessage"> element.

4

Add CSS for the fade transition

Add CSS styles for the fade transition below the <template>. Define these classes: .fade-enter-active and .fade-leave-active with transition: opacity 0.5s ease;. Define .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 Transition!
  



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

Need a hint?

Use CSS classes with transition: opacity 0.5s ease; and opacity: 0; for fade effect.