TransitionGroup for lists in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Vue TransitionGroup component correctly.

Vue

<script setup>
import { [1] } from 'vue'
</script>

Drag options to blanks, or click blank then click option'

ATransitionGroup

BTransition

CTeleport

DKeepAlive

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Transition instead of TransitionGroup.

Forgetting to import the component.

The TransitionGroup component is imported from 'vue' to enable list transitions.

2fill in blank

medium

Complete the template to wrap the list items with the TransitionGroup component.

Vue

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

Drag options to blanks, or click blank then click option'

Atransition

Btransition-group

Cdiv

Dtemplate

Attempts:

3 left

💡 Hint

Common Mistakes

Using transition instead of transition-group.

Using a div or template tag instead.

The transition-group tag is used in templates to animate list items.

3fill in blank

hard

Fix the error in the TransitionGroup usage by completing the missing attribute.

Vue

<template>
  <transition-group [1]="ul" name="slide">
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </transition-group>
</template>

Drag options to blanks, or click blank then click option'

Aclass

Btype

Cmode

Dtag

Attempts:

3 left

💡 Hint

Common Mistakes

Using type or mode instead of tag.

Omitting the tag attribute causing invalid HTML.

The tag attribute tells transition-group which HTML element to render as the wrapper.

4fill in blank

hard

Fill both blanks to create a fade transition with correct CSS classes.

Vue

<style scoped>
.fade-[1] {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fade-[2] {
  opacity: 1;
}
</style>

Drag options to blanks, or click blank then click option'

Aleave-active

Benter-active

Center-to

Dleave-to

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing leave-active with enter-active.

Using leave-to instead of enter-to for fade-in.

The enter-active class defines the transition timing, and enter-to sets the final visible state.

5fill in blank

hard

Fill all three blanks to correctly bind the list and handle item removal with a key.

Vue

<template>
  <transition-group tag="ul" name="list">
    <li v-for="[1] in [2]" :key="[3].id">
      {{ [3].text }}
    </li>
  </transition-group>
</template>

Drag options to blanks, or click blank then click option'

Aitem

Bitems

Delement

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for loop and key.

Using a variable name not defined in the script.

The v-for loops over items with item as the variable, and the key uses item.id.