TransitionGroup for lists in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you remove the key attribute inside a TransitionGroup list?

Consider a Vue 3 component using <TransitionGroup> to animate a list of items. Each item has a unique key attribute. What is the visible effect if you remove the key attribute from the list items?

Vue

<template>
  <TransitionGroup name="fade" tag="ul">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </TransitionGroup>
</template>

A The list items animate correctly when added or removed.

B Vue throws a runtime warning and animations may behave unpredictably.

C The list renders but no animations occur, and no warnings are shown.

D The component crashes with a TypeError.

💡 Hint

Think about how Vue tracks list items for transitions.

Vue requires a unique key on each item inside a TransitionGroup to track elements for proper animation. Without keys, Vue cannot identify which items changed, causing warnings and broken animations.

📝 Syntax

intermediate

Which option correctly uses TransitionGroup with a custom tag and CSS classes?

Choose the correct Vue 3 syntax to wrap a list with TransitionGroup using a div tag and applying the CSS class list-container.

A

<TransitionGroup tag="div" class:list-container>
  <div v-for="item in items" :key="item.id">{{ item.text }}</div>
</TransitionGroup>

B

<TransitionGroup tag="div" :class="list-container">
  <div v-for="item in items" :key="item.id">{{ item.text }}</div>
</TransitionGroup>

C

<TransitionGroup tag="div" class="list-container">
  <div v-for="item in items" :key="item.id">{{ item.text }}</div>
</TransitionGroup>

D

<TransitionGroup tag="div" :class="['list-container']">
  <div v-for="item in items" :key="item.id">{{ item.text }}</div>
</TransitionGroup>

💡 Hint

Remember how to bind static classes in Vue templates.

Static classes are added with the class attribute directly. Using :class expects a JavaScript expression. Option C correctly uses class="list-container" for a static class.

❓ state_output

advanced

What is the final rendered list after removing an item with TransitionGroup?

Given this Vue 3 component code, what is the final list rendered after clicking the 'Remove' button once?

Vue

<template>
  <TransitionGroup tag="ul" name="fade">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </TransitionGroup>
  <button @click="removeFirst">Remove</button>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([
  { id: 1, text: 'Apple' },
  { id: 2, text: 'Banana' },
  { id: 3, text: 'Cherry' }
])
function removeFirst() {
  items.value.shift()
}
</script>

A <ul><li>Banana</li><li>Cherry</li></ul>

B <ul><li>Apple</li><li>Cherry</li></ul>

C <ul><li>Apple</li><li>Banana</li></ul>

D <ul><li>Cherry</li></ul>

💡 Hint

What does shift() do to an array?

The shift() method removes the first element from the array. So 'Apple' is removed, leaving 'Banana' and 'Cherry'. The TransitionGroup animates this change.

🔧 Debug

advanced

Why does this TransitionGroup animation not run on list reorder?

In this Vue 3 code, the list items reorder but no animation runs. What is the cause?

Vue

<template>
  <TransitionGroup name="slide" tag="ul">
    <li v-for="item in items" :key="item.text">{{ item.text }}</li>
  </TransitionGroup>
  <button @click="reverse">Reverse</button>
</template>

<script setup>
import { ref } from 'vue'
const items = ref(['One', 'Two', 'Three'])
function reverse() {
  items.value = [...items.value].reverse()
}
</script>

A The <code>tag</code> attribute must be <code>div</code> for animations to work.

B The <code>TransitionGroup</code> requires a <code>mode</code> attribute to animate reorder.

C The <code>reverse()</code> method mutates the array in place, breaking reactivity.

D Using the item text as key causes Vue to reuse elements incorrectly, preventing animation.

💡 Hint

Keys must uniquely identify items even after reorder.

Using the item text as key can cause Vue to confuse elements if texts are not unique or stable. This prevents proper animation on reorder. Unique stable keys like IDs are recommended.

🧠 Conceptual

expert

How does TransitionGroup differ from Transition in Vue 3?

Choose the best explanation of the difference between TransitionGroup and Transition components in Vue 3.

A <code>TransitionGroup</code> animates a list of elements with automatic move transitions; <code>Transition</code> animates a single element or component.

B <code>Transition</code> is used only for CSS animations; <code>TransitionGroup</code> is for JavaScript animations.

C <code>TransitionGroup</code> requires manual key management; <code>Transition</code> does not support keys.

D <code>Transition</code> can animate multiple elements simultaneously; <code>TransitionGroup</code> can animate only one.

💡 Hint

Think about single vs multiple elements animation.

Transition is designed to animate one element or component entering or leaving. TransitionGroup handles lists of elements, including move animations when items reorder.