Vue · Middle · Question 51 of 75

How do you animate items being added, removed and reordered in a list?

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

✓Correct answer: Use <TransitionGroup> with keyed children; the list-move class animates position changes
2Wrap the list in <Transition>
3Lists can't be animated

Explanation

<Transition> handles a single element; <TransitionGroup> handles each keyed item and uses FLIP for moves.

Further reading

Vue: TransitionGroup ↗

Test yourself

Take the Vue · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.