Transition modes (in-out, out-in) in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when using mode="in-out" in Vue transitions?

Consider a Vue component that toggles between two elements with a <transition> wrapper using mode="in-out". What is the behavior of the entering and leaving elements?

Vue

<template>
  <transition name="fade" mode="in-out">
    <component :is="currentComponent" :key="currentComponent" />
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const currentComponent = ref('CompA')
// toggling logic omitted
</script>

A Both elements enter and leave simultaneously without waiting for each other.

B The old element leaves first, then the new element enters after the leave transition finishes.

C The new element enters first, then the old element leaves after the enter transition finishes.

D The transition mode is ignored and elements switch instantly without animation.

💡 Hint

Think about which element Vue waits for before starting the other transition.

In in-out mode, Vue waits for the entering element's transition to finish before starting the leaving element's transition.

❓ component_behavior

intermediate

How does mode="out-in" affect Vue transition timing?

Given a Vue transition with mode="out-in", what is the sequence of the leaving and entering elements?

Vue

<template>
  <transition name="slide" mode="out-in">
    <component :is="currentView" :key="currentView" />
  </transition>
</template>

A The transition mode causes a flicker and no animation occurs.

B The new element enters immediately while the old element is still leaving.

C Both elements transition simultaneously without waiting.

D The old element leaves first, then the new element enters after the leave transition finishes.

💡 Hint

Consider which element Vue waits to finish before starting the other.

In out-in mode, Vue waits for the leaving element's transition to finish before starting the entering element's transition.

📝 Syntax

advanced

Which Vue transition mode value causes this error?

What error occurs if you set mode="inout" (without the dash) on a Vue <transition> component?

Vue

<template>
  <transition name="fade" mode="inout">
    <div v-if="show">Content</div>
  </transition>
</template>

A Vue ignores the mode and transitions run simultaneously without error.

B Vue throws a warning and defaults to no mode, running transitions simultaneously.

C Vue throws a runtime error and the component fails to render.

D Vue treats it as <code>in-out</code> mode automatically.

💡 Hint

Check Vue's behavior on invalid mode values.

Vue warns about invalid mode values and defaults to no mode, so transitions run simultaneously.

❓ state_output

advanced

What is the visible output order with mode="in-out" when toggling components?

Given a Vue app toggling between CompA and CompB inside a <transition mode="in-out">, which component is visible first during the transition?

Vue

<template>
  <button @click="toggle">Toggle</button>
  <transition name="fade" mode="in-out">
    <component :is="current" :key="current" />
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const current = ref('CompA')
function toggle() {
  current.value = current.value === 'CompA' ? 'CompB' : 'CompA'
}
</script>

A CompB appears first, then CompA fades out after CompB finishes entering.

B CompA fades out first, then CompB appears after CompA finishes leaving.

C Both components appear and disappear simultaneously.

D No transition occurs; components switch instantly.

💡 Hint

Recall the in-out mode behavior for entering and leaving elements.

With in-out, the new component enters first and is visible, then the old component leaves after the enter transition finishes.

🔧 Debug

expert

Why does the out-in transition cause a flicker in this Vue app?

In a Vue app using <transition mode="out-in"> to switch views, users notice a flicker (blank space) between transitions. What is the most likely cause?

Vue

<template>
  <transition name="fade" mode="out-in">
    <component :is="currentView" :key="currentView" />
  </transition>
</template>

<script setup>
import { ref } from 'vue'
const currentView = ref('ViewA')
// toggling logic omitted
</script>

A The leaving element is removed before the entering element is mounted, causing a brief empty space.

B Vue does not support <code>out-in</code> mode, so flicker is expected.

C CSS transition durations are mismatched causing flicker during overlap.

D The entering element is mounted too early, overlapping the leaving element causing flicker.

💡 Hint

Think about the sequence of element removal and insertion in out-in mode.

In out-in mode, Vue removes the leaving element before mounting the entering element, which can cause a brief empty space (flicker) if transitions or content loading take time.

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"