Transition modes (in-out, out-in) in Vue - Mini Project: Build & Apply

Vue Transition Modes: in-out and out-in

📖 Scenario: You are building a simple Vue app that switches between two messages with a fade effect. You want to control how the old message leaves and the new message enters using Vue's transition mode property.

🎯 Goal: Create a Vue component that toggles between two messages with a fade transition. Use the mode property on the <transition> component to demonstrate the difference between in-out and out-in modes.

📋 What You'll Learn

Create a Vue component with a reactive variable showFirst to toggle messages

Add a button to switch between the two messages

Use a <transition> component with a fade CSS class

Set the mode property on <transition> to in-out or out-in to control transition timing

💡 Why This Matters

🌍 Real World

Transition modes help create smooth user interface animations when switching content, improving user experience in web apps.

💼 Career

Understanding Vue transition modes is useful for frontend developers building interactive and polished web applications.

1

Setup Vue component with reactive state

Create a Vue component using <script setup>. Inside it, import ref from 'vue' and create a reactive boolean variable called showFirst initialized to true.

Vue

// Create a reactive variable called showFirst and set it to true
// Your code here

Need a hint?

Use ref(true) to create a reactive boolean variable named showFirst.

2

Add toggle button and message elements

Below the <script setup>, add a <template> section. Inside it, add a <button> that toggles showFirst when clicked. Also add two <div> elements with messages "First Message" and "Second Message". Use v-if on each <div> to show the first message when showFirst is true and the second message when false.

Vue

import { ref } from 'vue'
const showFirst = ref(true)



  
  
  

Need a hint?

Use @click="showFirst = !showFirst" on the button to toggle the boolean. Use v-if="showFirst" and v-else on the divs.

3

Wrap messages in a transition with fade classes

Wrap the two message <div> elements inside a <transition> component. Add the attribute name="fade" to the <transition>. This will apply CSS classes for fade animations.

Vue

import { ref } from 'vue'
const showFirst = ref(true)



  Toggle Message
  
  

Need a hint?

Wrap the two divs inside <transition name="fade"> and </transition>.

4

Add transition mode attribute and fade CSS

Add the attribute mode="in-out" to the <transition> component to control the transition timing. Then add a <style> block with CSS for the fade transition using the classes .fade-enter-active, .fade-leave-active, .fade-enter-from, and .fade-leave-to. Use opacity changes and a 0.5s transition. This completes the fade effect with the chosen mode.

Vue

import { ref } from 'vue'
const showFirst = ref(true)



  Toggle Message
  
    First Message
    Second Message
  



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

Need a hint?

Add mode="in-out" to the transition tag. Use CSS classes to fade opacity from 0 to 1 with a 0.5 second transition.