stack/packages/mosaic/framework/skills/vue-best-practices/reference/transition-group-move-animation-position-absolute.md

title, impact, impactDescription, type, tags

title	impact	impactDescription	type	tags
TransitionGroup Move Animation Requires Position Absolute on Leaving Items	HIGH	Without position absolute, surrounding items jump instead of smoothly animating	gotcha	vue3 transition-group animation move-transition css list-animation

TransitionGroup Move Animation Requires Position Absolute on Leaving Items

Impact: HIGH - When items are added or removed from a list with <TransitionGroup>, surrounding items will instantly "jump" to their new positions instead of smoothly animating. This creates a jarring user experience and is one of the most common mistakes with list animations.

The fix is to set position: absolute on the leave-active class so leaving items are taken out of the layout flow, allowing other items to smoothly animate into their new positions.

Task Checklist

• Add .list-move class (or .[name]-move) for smooth repositioning
• Set position: absolute on .list-leave-active class
• Ensure the parent container has position: relative if needed
• Test with rapid add/remove operations to verify smooth animations

Incorrect - Items jump instead of moving:

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

<style>
/* INCOMPLETE: Missing move class and position absolute */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

Correct - Smooth move transitions:

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

<style>
/* CORRECT: Full set of classes for smooth animations */

/* Apply transition to moving elements */
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* CRITICAL: Take leaving items out of layout flow */
.list-leave-active {
  position: absolute;
}
</style>

Why This Works

The FLIP animation technique Vue uses internally needs to calculate element positions. When an item leaves:

1. Without position: absolute: The leaving item still occupies space in the DOM
2. Other items can't move until the leaving item is fully removed
3. Result: Items snap to new positions after leave animation completes

With position: absolute:

1. Leaving item is removed from normal layout flow immediately
2. Other items can begin moving into the vacated space
3. Result: Leaving animation and move animation happen simultaneously

Visual Diagram

Without position: absolute:
[A] [B] [C] [D]  <- Remove B
[A]     [C] [D]  <- B fading out, C/D waiting
[A] [C] [D]      <- B gone, C/D jump instantly

With position: absolute:
[A] [B] [C] [D]  <- Remove B
[A][B][C] [D]    <- B fading (absolute), C/D sliding left
[A] [C] [D]      <- Smooth completion

Additional Considerations

Container Width: When using position: absolute, items may need explicit widths:

.list-leave-active {
  position: absolute;
  width: 100%; /* Or specific width to maintain layout during leave */
}

Stacking Context: Leaving items with position: absolute may stack above other elements:

.list-leave-active {
  position: absolute;
  z-index: -1; /* Optional: put behind other items */
}

Reference

• Vue.js TransitionGroup Move Transitions
• FLIP Animation Technique