TransitionGroup for lists in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is <TransitionGroup> used for in Vue?

<TransitionGroup> is used to animate list items when they are added, removed, or moved in a list.

beginner

How do you specify the HTML tag that <TransitionGroup> renders as?

Use the tag attribute, for example: <TransitionGroup tag="ul"> to render as an unordered list.

beginner

Why must each item inside a <TransitionGroup> have a unique key?

Vue uses the key to track each item and apply the correct animation when items change.

intermediate

What CSS classes does Vue automatically add during <TransitionGroup> animations?

Vue adds classes like v-enter-from, v-enter-active, v-leave-from, v-leave-active, and v-move to control animation stages.

intermediate

How can you animate list item moves inside <TransitionGroup>?

<p>Use the <code>move</code> CSS class with <code>transition</code> or <code>animation</code> properties to animate items shifting positions.</p>

What attribute do you use to set the HTML tag for <TransitionGroup>?

A as

B type

C element

D tag

The tag attribute sets which HTML element <TransitionGroup> renders as.

Why is the key attribute important inside <TransitionGroup>?

A To identify each list item uniquely for animations

B To style the items

C To add event listeners

D To set the item text

Vue uses key to track items and animate them correctly when the list changes.

Which CSS class is NOT automatically added by Vue during <TransitionGroup> animations?

A v-enter-active

B v-hover

C v-move

D v-leave-from

v-hover is not related to Vue's transition classes.

What does the move class do in <TransitionGroup> animations?

A Adds shadows

B Changes item colors

C Animates items moving positions

D Disables animations

The move class is used to animate the shifting of list items.

Which Vue feature helps animate list changes smoothly?

A <code>&lt;TransitionGroup&gt;</code>

B <code>&lt;KeepAlive&gt;</code>

C <code>&lt;Teleport&gt;</code>

D <code>&lt;Suspense&gt;</code>

<TransitionGroup> is designed for animating list changes.

Explain how <TransitionGroup> helps animate lists in Vue and why keys are important.

Think about how Vue knows which item changed and how it animates that change.

Describe how to use CSS classes to animate items moving positions inside a <TransitionGroup>.

Focus on the special class Vue adds for moving items.