Transition modes (in-out, out-in) in Vue - Step-by-Step Execution

Concept Flow - Transition modes (in-out, out-in)

Trigger state change

↓

Start transition mode

↓

in-out mode

↓

Enter new element

↓

Leave old element

↓

out-in mode

↓

Leave old element

↓

Enter new element

When a state changes, Vue uses transition modes to decide if the new element enters before the old leaves (in-out) or the old leaves before the new enters (out-in).

Execution Sample

Vue

<template>
  <transition mode="in-out">
    <div v-if="show" key="A">A</div>
    <div v-else key="B">B</div>
  </transition>
</template>

This Vue template toggles between two elements with an in-out transition mode controlling their enter and leave order.

Execution Table

Step	Transition Mode	Current State	Action	Element Entering	Element Leaving	Resulting DOM
1	in-out	show = true	Initial render	A	none	<div>A</div>
2	in-out	show changes to false	Start transition	B	A	A visible, B entering
3	in-out	during transition	New element enters first	B visible	A visible	Both visible overlapping
4	in-out	after new enters	Old element leaves	B visible	A removed	<div>B</div>
5	out-in	show changes to true	Start transition	A	B	B visible, A waiting
6	out-in	during transition	Old element leaves first	A waiting	B removed	No element visible momentarily
7	out-in	after old leaves	New element enters	A visible	none	<div>A</div>

💡 Transitions complete when entering and leaving elements finish their animations.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
show	true	false	false	false	true	true	true
Element Entering	A	B	B	B	A	A	A
Element Leaving	none	A	A	removed	B	removed	none
DOM Content	<div>A</div>	<div>A</div> + <div>B entering</div>	Both visible	<div>B</div>	<div>B</div>	empty	<div>A</div>

Key Moments - 3 Insights

Why does 'in-out' mode show both elements visible at the same time during transition?

Because in 'in-out' mode, the new element enters first before the old element leaves, so both are visible overlapping during the transition (see execution_table rows 2 and 3).

Why is there a moment with no visible element in 'out-in' mode?

In 'out-in' mode, the old element leaves completely before the new element enters, causing a brief moment with no visible element (see execution_table row 6).

What determines which element enters or leaves first?

The transition mode property ('in-out' or 'out-in') controls the order of entering and leaving elements during state changes.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the new element enter first in 'in-out' mode?

A Step 5

B Step 2

C Step 3

D Step 6

💡 Hint

Check the 'Element Entering' column for 'in-out' mode steps.

At which step in 'out-in' mode does the old element leave completely before the new enters?

A Step 6

B Step 4

C Step 3

D Step 2

💡 Hint

Look for when 'Element Leaving' is 'removed' and 'Element Entering' is still waiting.

If the transition mode is changed from 'in-out' to 'out-in', what changes in the DOM during transition?

A New element enters before old leaves

B Old element leaves before new enters

C Both elements enter simultaneously

D No transition happens

💡 Hint

Compare the 'Action' and 'Resulting DOM' columns for both modes.

Concept Snapshot

Vue transition modes control element enter/leave order:
- in-out: new enters first, old leaves after
- out-in: old leaves first, new enters after
Use mode="in-out" or mode="out-in" on <transition>
Controls smooth visual switching between elements

Full Transcript

This visual trace shows how Vue's transition modes 'in-out' and 'out-in' control the order of entering and leaving elements during state changes. In 'in-out' mode, the new element enters first while the old element is still visible, causing overlap during transition. In 'out-in' mode, the old element leaves completely before the new element enters, causing a brief moment with no visible element. The execution table tracks each step, showing which element enters or leaves and the resulting DOM content. The variable tracker follows the state variable and elements' presence. Key moments clarify common confusions about overlapping visibility and empty moments. The quiz tests understanding of the transition order and effects on the DOM.

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"