Transition component for animations in Vue - Mini Project: Build & Apply

Vue Transition Component for Animations

📖 Scenario: You are building a simple Vue app that shows and hides a message with a smooth fade animation. This is like turning a light on and off gently instead of suddenly.

🎯 Goal: Create a Vue component that uses the <transition> component to animate showing and hiding a message with a fade effect.

📋 What You'll Learn

Create a Vue component with a boolean state 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 to smoothly fade the message in and out.

💡 Why This Matters

🌍 Real World

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

💼 Career

Knowing how to use Vue's transition component is important for frontend developers to create engaging and accessible web apps.

1

Set up the Vue component with data

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

Vue

// Define showMessage as false
// Your code here

Need a hint?

Use import { ref } from 'vue' and then const showMessage = ref(false).

2

Add a button to toggle the message

Add a <button> element that toggles the value of showMessage when clicked. Use the @click event with showMessage = !showMessage.

Vue

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



  
  

Need a hint?

Use <button @click="showMessage = !showMessage">Toggle Message</button>.

3

Wrap the message with the transition component

Inside the <template>, 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.

Vue

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



  Toggle Message
  
  

Need a hint?

Use <transition name="fade"><p v-if="showMessage">Hello, Vue Transition!</p></transition>.

4

Add CSS for the fade transition

Add CSS styles for the fade transition using the classes .fade-enter-active, .fade-leave-active, .fade-enter-from, and .fade-leave-to. Use transition: opacity 0.5s ease for the active classes and set opacity: 0 for the from and to classes to create a fade effect.

Vue

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



  Toggle Message
  
    Hello, Vue Transition!
  



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

Need a hint?

Define CSS classes for fade transitions with opacity changes and a 0.5 second ease transition.