Transition component for animations in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

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

Consider a Vue 3 component using the <Transition> component to wrap a single <div>. What is the visible effect when the wrapped 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>

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

A The <code>div</code> appears and disappears instantly 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 when shown and slides out when hidden.

D The <code>div</code> blinks rapidly without a smooth transition.

💡 Hint

Think about how the CSS classes named with fade- affect opacity during enter and leave.

The <Transition> component applies CSS classes during the element's lifecycle. Here, the fade-enter-active and fade-leave-active classes define a half-second opacity transition. The fade-enter-from and fade-leave-to classes set opacity to 0 at start and end, causing a smooth fade effect.

📝 Syntax

intermediate

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

Vue's <Transition> component expects a single child element. Which code snippet correctly wraps multiple elements for transition?

A

<Transition>
  <div>
    <div>One</div>
    <div>Two</div>
  </div>
</Transition>

B

<Transition>
  <div>One</div>
  <div>Two</div>
</Transition>

C

<Transition>
  <template>
    <div>One</div>
    <div>Two</div>
  </template>
</Transition>

D

<Transition>
  <span>One</span>
  <span>Two</span>
</Transition>

💡 Hint

Remember that <Transition> accepts only one root element. How can you group multiple elements without adding extra nodes?

Vue's <Transition> requires exactly one child element. Using a <template> as a wrapper allows grouping multiple elements without adding extra DOM nodes, which is the correct approach here.

❓ state_output

advanced

What is the value of isActive after the transition ends?

Given this Vue component using <Transition>, what will be the value of isActive after the leave transition finishes?

Vue

<template>
  <Transition @after-leave="handleAfterLeave">
    <div v-if="show">Content</div>
  </Transition>
  <button @click="show = false">Hide</button>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
const isActive = ref(true)
function handleAfterLeave() {
  isActive.value = false
}
</script>

A true

B null

C undefined

D false

💡 Hint

Look at the event @after-leave and what the handler does.

The @after-leave event fires after the leave animation finishes. The handler sets isActive.value to false, so after the transition ends, isActive is false.

🔧 Debug

advanced

Why does the transition not play when toggling visibility?

This Vue component uses <Transition> but the fade animation does not run when toggling show. What is the likely cause?

Vue

<template>
  <Transition name="fade">
    <div v-show="show">Hello</div>
  </Transition>
  <button @click="show = !show">Toggle</button>
</template>

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

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

A Using <code>v-show</code> instead of <code>v-if</code> prevents the transition from triggering.

B The CSS classes are missing the <code>opacity</code> property.

C The <code>Transition</code> component requires a <code>mode</code> prop to work.

D The <code>show</code> variable is not reactive.

💡 Hint

Think about how v-show and v-if differ in DOM behavior.

v-show toggles the element's CSS display property without removing it from the DOM. The <Transition> component only triggers animations when elements enter or leave the DOM, which happens with v-if. So using v-show prevents the transition animation.

🧠 Conceptual

expert

Which statement about <Transition> and accessibility is true?

When using Vue's <Transition> component for animations, which practice best supports accessibility?

A Always use <code>aria-hidden</code> to hide elements during transitions to prevent screen reader confusion.

B Disable all animations for users with reduced motion preferences by ignoring <code>&lt;Transition&gt;</code>.

C Ensure that elements entering or leaving are properly focusable and update ARIA attributes as needed.

D Use <code>&lt;Transition&gt;</code> only on decorative elements to avoid accessibility issues.

💡 Hint

Think about how animations affect keyboard focus and screen readers.

Good accessibility means managing focus and ARIA attributes so users relying on assistive tech understand content changes. Ensuring elements are focusable and ARIA attributes update during transitions helps screen readers and keyboard users follow the UI changes.