Scaling UpLesson 39Free preview

Vue Animations with v-for

This lesson is part of Vue · All levels

Summary

For a frequently changing list, the TransitionGroup component manages the animation of moving positions between items, not just in and out. Vue adds a move class when the item position shifts, so you can make smooth transitions. The unique key to each item is to determine the quality of this animation.

Key points

TransitionGroup is used to animate lists on v-for.
Unlike Transition, it can accommodate many elements.
The move class is applied when an item shifts position.
Each item requires a unique key to keep track of the move.
The final element remains a regular HTML tag like ul or div.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.