Enter and leave transitions in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the <Transition> component wraps a conditionally rendered element?

Consider this Vue 3 code snippet using the <Transition> component:

<template>
  <Transition name="fade">
    <div v-if="show">Hello</div>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

What is the visible behavior when show changes from true to false?

Vue

<template>
  <Transition name="fade">
    <div v-if="show">Hello</div>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

A The <div> disappears immediately without any animation.

B The <div> remains visible even if <code>show</code> is false.

C The <div> fades in when shown but disappears immediately when hidden.

D The <div> fades out smoothly before being removed from the DOM.

💡 Hint

Think about what the <Transition> component does with elements entering and leaving the DOM.

The <Transition> component applies CSS classes for enter and leave states. When show changes to false, the element fades out smoothly before Vue removes it from the DOM.

📝 Syntax

intermediate

Which option correctly defines a CSS fade transition for Vue's <Transition> component?

You want to create a fade effect for entering and leaving elements using Vue's <Transition> with name="fade". Which CSS snippet is correct?

A .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter-from, .fade-leave-to { opacity: 0; } .fade-enter-to, .fade-leave-from { opacity: 1; }

B .fade-enter, .fade-leave { transition: opacity 0.5s; } .fade-enter-active, .fade-leave-active { opacity: 0; }

C .fade-enter-active { opacity: 1; } .fade-leave-active { opacity: 0; transition: opacity 0.5s; }

D .fade-enter-from, .fade-leave-from { transition: opacity 0.5s; } .fade-enter-to, .fade-leave-to { opacity: 1; }

💡 Hint

Remember Vue uses -enter-active and -leave-active classes for transitions and -from/-to for start/end states.

Option A correctly sets the transition on the active classes and defines opacity 0 at the start of enter and end of leave, with opacity 1 at the end of enter and start of leave.

❓ state_output

advanced

What is the final DOM state after toggling a <Transition> wrapped element off?

Given this Vue 3 component:

<template>
  <button @click="show = !show">Toggle</button>
  <Transition name="slide">
    <p v-if="show">Slide me</p>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

After clicking the button to set show to false, what happens to the <p> element in the DOM?

Vue

<template>
  <button @click="show = !show">Toggle</button>
  <Transition name="slide">
    <p v-if="show">Slide me</p>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

A The <p> element animates sliding out and then is removed from the DOM.

B The <p> element is immediately removed from the DOM with no animation.

C The <p> element remains in the DOM but is hidden with CSS.

D The <p> element stays visible and does not respond to the toggle.

💡 Hint

Think about how Vue handles leave transitions with <Transition>.

Vue keeps the element in the DOM during the leave animation, then removes it after the animation finishes.

🔧 Debug

advanced

Why does this Vue transition not animate on leave?

Look at this Vue 3 code:

<template>
  <Transition name="fade">
    <div v-if="visible">Content</div>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(true)
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
</style>

When visible changes from true to false, the element disappears immediately without fading out. Why?

Vue

<template>
  <Transition name="fade">
    <div v-if="visible">Content</div>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(true)
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
</style>

A The transition duration is too short to notice the animation.

B The <code>v-if</code> directive is not reactive, so the transition does not trigger.

C The CSS is missing the .fade-leave-from class, so leave animation cannot start properly.

D The transition name 'fade' is not correctly applied to the element.

💡 Hint

Check if all required CSS classes for enter and leave states are defined.

The leave transition requires .fade-leave-from to define the starting opacity. Without it, the element jumps to opacity 0 immediately, skipping animation.

🧠 Conceptual

expert

How does Vue's <Transition> component manage multiple elements leaving simultaneously?

When multiple elements inside a <TransitionGroup> leave at the same time, how does Vue ensure smooth animations?

A Vue removes all elements immediately and applies a global fade-out animation to the container.

B Vue delays removing each element until its individual leave animation finishes, tracking each separately.

C Vue queues the leave animations to run one after another, never overlapping.

D Vue clones the elements and animates the clones while removing the originals instantly.

💡 Hint

Think about how Vue handles asynchronous animations for multiple elements.

Vue tracks each leaving element individually and waits for its leave animation to finish before removing it from the DOM, allowing smooth simultaneous animations.