Vue Academy · Lesson

TransitionGroup for List Animations

Animating v-for lists, move transitions, staggered animations with delay.

TransitionGroup for List Animations is a free Vue Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Animating Lists

<Transition> handles a single element. For lists rendered with v-for, use <TransitionGroup>, which animates items as they are added, removed, and reordered.

The tag Prop

Unlike Transition, TransitionGroup can render a real wrapper element. Pass tag="ul" (or any tag) and it outputs that element around the list items.

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

Every Item Needs a key

A unique :key on each item is required. Vue uses it to track which items moved, entered, or left. Never use the array index as the key for animated lists.

<li v-for="item in items" :key="item.id">{{ item.text }}</li>

Enter and Leave Classes

TransitionGroup uses the same enter/leave classes as Transition. Define them for the per-item appearance and removal.

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

The Special move Class

The standout feature is the -move class (e.g. list-move). When items reorder, Vue smoothly animates each one to its new position using a transform transition.

.list-move {
  transition: transform 0.4s ease;
}

The FLIP Technique

Behind -move is FLIP: First record the old position, Last read the new position, Invert with a transform so it looks unmoved, then Play by removing the transform. Vue does this automatically.

/* Vue computes: translate(oldX - newX) then animates to 0 */

Leaving Items Need Absolute Positioning

An element being removed still occupies space, which can break the move animation of its neighbors. Set position: absolute on the leave-active class so departing items are taken out of layout flow.

.list-leave-active {
  position: absolute;
}

A Sortable List Example

Combine enter, leave, and move classes and Vue animates insertion, removal, and shuffling all at once.

function shuffle() {
  items.value = items.value
    .slice()
    .sort(() => Math.random() - 0.5);
}

Stagger with transitionDelay

To make items appear one after another, bind an inline transition-delay based on the item index. Each item waits a little longer than the previous one.

<li
  v-for="(item, i) in items"
  :key="item.id"
  :style="{ transitionDelay: i * 50 + 'ms' }"
>
  {{ item.text }}
</li>

Staggering with JS Hooks

For data-driven stagger you can also use the JS hooks and a data-index attribute, delaying each onEnter by the element index.

function onEnter(el, done) {
  const delay = el.dataset.index * 50;
  setTimeout(() => {
    el.style.opacity = 1;
    done();
  }, delay);
}

Performance Notes

FLIP animates transform, which is GPU-friendly. Keep lists reasonably sized and prefer transform/opacity over layout-triggering properties like width or top for smooth 60fps motion.

Quick Check

What does the list-move class enable?

Recap

You learned <TransitionGroup> for lists: render a wrapper with tag, give every item a unique :key, use enter/leave classes plus the -move class for FLIP-based reorder animations, absolutely position leaving items, and create stagger effects with index-based transitionDelay.

Frequently asked questions

Is the “TransitionGroup for List Animations” lesson free?

Yes — the full text of “TransitionGroup for List Animations” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “TransitionGroup for List Animations”?

Animating v-for lists, move transitions, staggered animations with delay. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “TransitionGroup for List Animations” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy