Vue List Animations

Vue List Animations

The standard <Transition> component only works on a single element rendering at a time.

But what happens if you want to animate an entire list of items rendered with a v-for loop?

If a user deletes an item from the middle of the list, the items below it should smoothly slide up into place!

The <TransitionGroup> Component

To animate entire arrays and lists, Vue provides the <TransitionGroup> component.

Unlike the single <Transition>, this component actually renders a real DOM element (a <span> by default).

You can change the rendered wrapper tag by passing the tag attribute, like tag="ul".

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

Moving Items Smoothly

The true magic of <TransitionGroup> is the "move" class it generates.

If an item's physical position on the screen changes (because another item was deleted or inserted), Vue applies a -move class.

By adding a smooth transition to this -move class, the list items will elegantly slide into their new positions!

/* Ensures items slide smoothly when their index changes */
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

/* Items completely fade out and shrink when leaving */
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}