CSS transition classes in Vue - Mini Project: Build & Apply

CSS Transition Classes in Vue

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

🎯 Goal: Create a Vue component that uses CSS transition classes to smoothly fade a message in and out when toggled.

📋 What You'll Learn

Create a Vue component with a boolean state variable called showMessage

Add a button that toggles showMessage when clicked

Use Vue's <transition> component with CSS classes named fade-enter-active, fade-leave-active, fade-enter-from, and fade-leave-to

Write CSS rules for these classes to create a fade effect using opacity and transition

Render a message box that appears and disappears with the fade effect when showMessage changes

💡 Why This Matters

🌍 Real World

Smooth transitions improve user experience in web apps by making UI changes feel natural and polished.

💼 Career

Knowing how to use Vue transitions and CSS classes is important for frontend developers building interactive and accessible interfaces.

1

Set up Vue component with message and toggle button

Create a Vue component with a showMessage boolean state variable initialized to false. Add a button with text Toggle Message that toggles showMessage when clicked. Also add a <div> with the text Hello, Vue transitions! that is conditionally rendered only when showMessage is true.

Vue

  



import { ref } from 'vue'

// Create showMessage variable here
// Your code here

Need a hint?

Use ref(false) to create showMessage. Use @click on the button to toggle it. Use v-if on the message div.

2

Wrap message with Vue transition component and add fade class name

Wrap the message <div> inside a Vue <transition> component. Set the transition's name attribute to fade so it uses CSS classes prefixed with fade- for transitions.

Vue

  Toggle Message
  



import { ref } from 'vue'

const showMessage = ref(false)

Need a hint?

Use <transition name="fade"> around the message div.

3

Add CSS classes for fade transition effect

Add CSS styles for the classes fade-enter-active and fade-leave-active to set transition: opacity 0.5s ease. Also add fade-enter-from and fade-leave-to classes to set opacity: 0. This will create a fade effect when the message appears or disappears.

Vue

  Toggle Message
  
    Hello, Vue transitions!
  



import { ref } from 'vue'

const showMessage = ref(false)



/* Add fade transition CSS classes here */

Need a hint?

Use transition: opacity 0.5s ease; on fade-enter-active and fade-leave-active. Set opacity: 0; on fade-enter-from and fade-leave-to.

4

Add aria-label for accessibility and style the button

Add an aria-label attribute with value Toggle message visibility to the button for accessibility. Also add CSS to style the button with padding 0.5rem 1rem, background color #4CAF50, white text color, border radius 0.25rem, and a pointer cursor on hover.

Vue

  
  Toggle Message
  
    Hello, Vue transitions!
  



import { ref } from 'vue'

const showMessage = ref(false)



.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* Add button styles here */

Need a hint?

Add aria-label="Toggle message visibility" to the button. Style the button with padding, background color, white text, border radius, and pointer cursor.