Dynamic transitions in Vue - Mini Project: Build & Apply

Dynamic transitions

📖 Scenario: You are building a simple Vue app that shows and hides a message with a smooth animation. You want to let the user choose the type of animation dynamically from a dropdown menu.

🎯 Goal: Create a Vue 3 component that uses dynamic transitions to animate showing and hiding a message. The user can select the transition name from a dropdown, and the message will appear or disappear with that animation.

📋 What You'll Learn

Create a reactive variable to control message visibility

Create a reactive variable to store the selected transition name

Use a <transition> component with a dynamic name bound to the selected transition

Add a button to toggle the message visibility

Add a dropdown to select the transition name dynamically

💡 Why This Matters

🌍 Real World

Dynamic transitions are common in web apps to improve user experience by smoothly showing or hiding content based on user actions.

💼 Career

Understanding dynamic transitions in Vue is useful for frontend developers building interactive and polished user interfaces.

1

Setup reactive variables

In the <script setup> block, create a reactive boolean variable called showMessage and set it to false. Also create a reactive string variable called transitionName and set it to fade.

Vue

// Create reactive variables showMessage and transitionName here
// Your code here



  

Need a hint?

Use ref(false) for showMessage and ref('fade') for transitionName.

2

Add dropdown to select transition

In the <template>, add a <select> element bound with v-model to transitionName. Add three <option> elements with values fade, slide, and bounce.

Vue

import { ref } from 'vue'

const showMessage = ref(false)
const transitionName = ref('fade')



  
  

Need a hint?

Use v-model="transitionName" on the <select> and add the three options exactly as given.

3

Add toggle button and dynamic transition

Below the dropdown, add a <button> that toggles showMessage when clicked. Then add a <transition> component with its name bound to transitionName. Inside the transition, conditionally render a <div> with the text "Hello, Vue transitions!" only when showMessage is true.

Vue

import { ref } from 'vue'

const showMessage = ref(false)
const transitionName = ref('fade')



  
    fade
    slide
    bounce
  
  
  
  
  

Need a hint?

Use @click="showMessage = !showMessage" on the button and bind :name="transitionName" on the transition.

4

Add CSS for transitions

Add CSS styles for the three transitions: fade, slide, and bounce. Use the Vue transition class naming conventions: <name>-enter-active, <name>-leave-active, <name>-enter-from, <name>-leave-to. For fade, fade opacity in and out. For slide, slide vertically. For bounce, add a simple bounce effect using transform scale. Place the CSS inside a <style scoped> block.

Vue

import { ref } from 'vue'

const showMessage = ref(false)
const transitionName = ref('fade')



  
    fade
    slide
    bounce
  
  Toggle Message
  
    Hello, Vue transitions!
  



/* Add CSS for fade, slide, and bounce transitions here */
/* Your code here */

Need a hint?

Use Vue's transition class names with CSS transitions for fade and slide, and keyframe animations for bounce.