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.

Practice

1. What is the main purpose of the <Transition> component in Vue?

easy

A. To add animations when elements enter or leave the page

B. To fetch data from an API

C. To manage application state globally

D. To create reusable UI components

Solution

1. Step 1: Understand the role of <Transition>

   The <Transition> component is designed to wrap elements and add animations when they appear or disappear.

2. Step 2: Compare with other options

   Fetching data, managing state, and creating components are unrelated to animation transitions.

3. Final Answer:

   To add animations when elements enter or leave the page -> Option A

4. Quick Check:

   Transition component = animations on enter/leave [OK]

Hint: Think: Transition means smooth entering or leaving [OK]

Common Mistakes:

• Confusing Transition with data fetching
• Thinking it manages state
• Assuming it creates components

2. Which of the following is the correct way to use the <Transition> component with a CSS class name 'fade'?

easy

A. Content

B. Content

C. Content

D. Content

Solution

1. Step 1: Recall the correct attribute for naming transition classes

   The name attribute sets the base CSS class for transition states.

2. Step 2: Check the options

   Only
   Content
   uses name="fade", which is correct. Others use invalid attributes like class, animation, or effect.

3. Final Answer:

   <Transition name="fade"><div v-if="show">Content</div></Transition> -> Option C

4. Quick Check:

   Use name="fade" for CSS classes [OK]

Hint: Use 'name' attribute to link CSS classes [OK]

Common Mistakes:

• Using 'class' instead of 'name'
• Using non-existent attributes like 'animation'
• Forgetting to wrap the element inside <Transition>

3. Given the following Vue template code, what will happen when show changes from false to true?

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

medium

A. The div will appear instantly without any animation

B. The div will appear with slide-enter-from and slide-enter-active CSS classes applied for animation

C. The div will not appear because Transition blocks rendering

D. The div will appear but with fade animation instead of slide

Solution

1. Step 1: Understand v-if with Transition

   When show becomes true, the div is inserted and Transition applies CSS classes based on the 'slide' name.

2. Step 2: Identify the animation classes

   The classes like slide-enter-from and slide-enter-active are added to animate the div's entrance.

3. Final Answer:

   The div will appear with slide-enter-from and slide-enter-active CSS classes applied for animation -> Option B

4. Quick Check:

   v-if true + Transition name = enter animation [OK]

Hint: v-if true triggers enter animation classes [OK]

Common Mistakes:

• Thinking Transition blocks rendering
• Assuming no animation on enter
• Confusing slide with fade animation

4. Identify the error in this Vue template using <Transition>:

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

medium

A. Using v-show instead of v-if prevents proper enter/leave animations

B. Missing closing tag for Transition

C. The name attribute should be 'fade-transition' not 'fade'

D. Transition cannot wrap a div element

Solution

1. Step 1: Understand difference between v-if and v-show with Transition

   Transition works best with v-if because it controls element insertion/removal, triggering enter/leave animations.

2. Step 2: Analyze the code

   Using v-show only toggles visibility via CSS, so Transition cannot detect element entering or leaving, preventing animations.

3. Final Answer:

   Using v-show instead of v-if prevents proper enter/leave animations -> Option A

4. Quick Check:

   Use v-if for Transition animations [OK]

Hint: Use v-if, not v-show, for enter/leave animations [OK]

Common Mistakes:

• Thinking v-show triggers enter/leave animations
• Believing name attribute must be longer
• Assuming Transition can't wrap div

5. You want to create a fade animation using <Transition> with these CSS classes:

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

Which Vue template correctly applies this animation to a paragraph that toggles with showText?

hard

A.
Hello World

B.
Hello World

C.
Hello World

D.
Hello World

Solution

1. Step 1: Match CSS classes with Transition usage

   The CSS classes use the base name 'fade', so the Transition component must have name="fade".

2. Step 2: Use v-if to toggle element presence

   v-if toggles the element in the DOM, triggering enter and leave animations. v-show only toggles visibility and won't trigger these animations.

3. Step 3: Check options

   Hello World

   uses name="fade" and v-if, which is correct.

   Hello World

   uses v-show, which won't animate properly.

   Hello World

   uses an invalid attribute 'animation'.

   Hello World

   shows the paragraph when showText is false, which is opposite of expected.

4. Final Answer:

   <Transition name="fade"> <p v-if="showText">Hello World</p> </Transition> -> Option D

5. Quick Check:

   Use name="fade" + v-if for fade animation [OK]

Hint: Use v-if with name="fade" for fade animations [OK]

Common Mistakes:

• Using v-show instead of v-if
• Using wrong attribute like animation
• Showing element when condition is false