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.