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.