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

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)



  
  
  

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
  
  

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 */

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.

Practice

1. What does the in-out transition mode do in Vue transitions?

easy

A. No transition happens; elements switch instantly.

B. The old element leaves first, then the new element enters.

C. Both elements enter and leave simultaneously.

D. The new element enters first, then the old element leaves.

Solution

1. Step 1: Understand transition modes

   Vue transition modes control the order of entering and leaving animations.

2. Step 2: Recall in-out behavior

   in-out means the new element enters first, then the old element leaves.

3. Final Answer:

   The new element enters first, then the old element leaves. -> Option D

4. Quick Check:

   in-out = new enters first [OK]

Hint: Remember: in-out means 'in' happens before 'out' [OK]

Common Mistakes:

• Confusing in-out with out-in order
• Thinking both enter and leave happen simultaneously
• Assuming no animation delay

2. Which is the correct syntax to apply the out-in transition mode in a Vue <transition> component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct mode attribute

   The mode attribute on <transition> sets the transition mode.

2. Step 2: Match mode value for out-in

   The correct value for the mode that makes old element leave first is "out-in".

3. Final Answer:

   <transition mode="out-in"> -> Option A

4. Quick Check:

   out-in mode syntax = mode="out-in" [OK]

Hint: Use mode="out-in" exactly for old leaves first [OK]

Common Mistakes:

• Using mode="in-out" instead of out-in
• Using invalid mode values like "both" or "enter-leave"
• Omitting quotes around mode value

3. Given this Vue template snippet:

<transition mode="out-in">
  <component :is="view" />
</transition>

If view changes from "A" to "B", what happens first?

medium

A. Component A leaves, then component B enters.

B. Component B enters, then component A leaves.

C. Both components enter and leave at the same time.

D. No transition occurs; component switches instantly.

Solution

1. Step 1: Identify transition mode in code

   The mode is set to "out-in", meaning the old component leaves first.

2. Step 2: Understand transition order

   When view changes, component A leaves first, then component B enters.

3. Final Answer:

   Component A leaves, then component B enters. -> Option A

4. Quick Check:

   out-in mode = old leaves first [OK]

Hint: out-in means old leaves before new enters [OK]

Common Mistakes:

• Thinking new enters before old leaves in out-in mode
• Assuming simultaneous enter and leave
• Ignoring the mode attribute effect

4. You wrote this Vue transition:

<transition mode="in-out">
  <div v-if="show">Hello</div>
</transition>

But the old element leaves before the new one enters. What is the likely mistake?

medium

A. You need to add a key attribute to the div.

B. You forgot to add v-show instead of v-if.

C. You used mode="in-out" but expected out-in behavior.

D. You must wrap the element in a <transition-group> instead.

Solution

1. Step 1: Analyze transition mode and behavior

   The mode is set to "in-out", which means new enters first, old leaves after.

2. Step 2: Compare expected and actual behavior

   The old element leaves before new enters, which matches "out-in" mode, not "in-out".

3. Final Answer:

   You used mode="in-out" but expected out-in behavior. -> Option C

4. Quick Check:

   in-out mode means new enters first [OK]

Hint: Match mode to expected order: in-out vs out-in [OK]

Common Mistakes:

• Confusing in-out and out-in modes
• Thinking v-if vs v-show affects mode order
• Assuming transition-group is needed for single elements

5. You want to create a Vue transition where the old element fades out completely before the new element fades in. Which transition mode and setup should you use?

hard

A. Use mode="in-out" with CSS fade-in on enter and fade-out on leave.

B. Use mode="out-in" with CSS fade-out on leave and fade-in on enter.

C. Use no mode and rely on simultaneous fade animations.

D. Use mode="both" with combined fade animations.

Solution

1. Step 1: Understand desired animation order

   You want the old element to fade out completely before the new element fades in.

2. Step 2: Choose correct transition mode

   out-in mode makes the old element leave first, then the new enters, matching the requirement.

3. Step 3: Confirm CSS setup

   Use CSS classes for fade-out on leave and fade-in on enter to achieve smooth transitions.

4. Final Answer:

   Use mode="out-in" with CSS fade-out on leave and fade-in on enter. -> Option B

5. Quick Check:

   Old fades out first = out-in mode [OK]

Hint: Old fades out first? Use out-in mode [OK]

Common Mistakes:

• Using in-out mode which enters new before old leaves
• Assuming simultaneous fades without mode
• Using invalid mode values like "both"