Transition component basics in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a Vue <transition> wraps a single element?

Consider a Vue component using the <transition> wrapper around a single <div>. What is the visible effect when the element is conditionally rendered?

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 <code>div</code> instantly appears and disappears without animation.

B The <code>div</code> fades in and out smoothly when <code>show</code> changes.

C The <code>div</code> slides in from the left but does not fade.

D The <code>div</code> remains visible and does not respond to <code>show</code>.

💡 Hint

Think about what the name attribute on <transition> does and how Vue applies CSS classes.

The <transition> component applies CSS classes with the prefix fade during the element's enter and leave phases. This triggers CSS transitions that cause the element to fade in and out smoothly.

📝 Syntax

intermediate

Which option correctly uses the <transition> component with multiple elements?

Vue's <transition> component only accepts one child element. How do you correctly wrap multiple elements to animate them together?

A

<transition name="slide">
  <div>One</div>
  <div>Two</div>
</transition>

B

<transition-group name="slide">
  <div>One</div>
  <div>Two</div>
</transition-group>

C

<transition name="slide">
  <template>
    <div>One</div>
    <div>Two</div>
  </template>
</transition>

D

<transition name="slide">
  <div>
    <div>One</div>
    <div>Two</div>
  </div>
</transition>

💡 Hint

Remember that <transition> requires a single root element, but <transition-group> can handle multiple siblings.

Option D wraps multiple elements inside a single <div>, satisfying the single child requirement of <transition>. Option D uses <transition-group>, which is for lists, not <transition>.

❓ state_output

advanced

What is the class sequence applied during a Vue transition?

When an element enters using a <transition name="fade">, which sequence of CSS classes does Vue apply?

A fade-enter-from → fade-enter-active → fade-enter-to

B fade-enter → fade-enter-to → fade-enter-active

C fade-enter-active → fade-enter-from → fade-enter-to

D fade-enter-from → fade-enter-to → fade-enter-active

💡 Hint

Vue applies classes in a specific order to trigger CSS transitions properly.

Vue first applies fade-enter-from and fade-enter-active, then switches fade-enter-from to fade-enter-to to start the transition.

🔧 Debug

advanced

Why does this Vue transition not animate on leave?

Given this code, the element fades in but disappears instantly without fade on leave. What is the cause?

Vue

<template>
  <transition name="fade">
    <div v-if="show">Bye</div>
  </transition>
</template>

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

A The <code>v-if</code> directive is not reactive, so leave animation is skipped.

B The <code>transition</code> property is missing on <code>fade-leave-active</code>.

C The <code>fade-leave-from</code> and <code>fade-leave-to</code> classes are reversed in opacity values.

D The <code>fade-leave-active</code> class is missing from the CSS.

💡 Hint

Check the opacity values for leave classes carefully.

The leave transition requires fade-leave-from to start at opacity 1 and fade-leave-to to end at opacity 0. The code has them reversed, so the fade out does not animate properly.

🧠 Conceptual

expert

How does Vue's <transition> component handle accessibility during animations?

When using <transition> to animate elements entering and leaving, what should you consider to maintain accessibility?

A Ensure elements are removed from the DOM only after animations finish to keep screen readers updated.

B Add <code>aria-hidden="true"</code> to elements during transitions to hide them from screen readers.

C Use <code>tabindex="-1"</code> on animated elements to prevent keyboard focus during animation.

D Disable all animations for users with reduced motion preferences by detecting CSS media queries.

💡 Hint

Think about how screen readers detect presence of elements and timing of DOM removal.

Vue's <transition> delays removing elements from the DOM until after the leave animation finishes. This ensures screen readers detect the element's presence correctly during the animation.