1---
2title: TransitionGroup Move Animation Requires Position Absolute on Leaving Items
3impact: HIGH
4impactDescription: Without position absolute, surrounding items jump instead of smoothly animating
5type: gotcha
6tags: [vue3, transition-group, animation, move-transition, css, list-animation]
7---
8 
9# TransitionGroup Move Animation Requires Position Absolute on Leaving Items
10 
11**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.
12 
13The 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.
14 
15## Task Checklist
16 
17- [ ] Add `.list-move` class (or `.[name]-move`) for smooth repositioning
18- [ ] Set `position: absolute` on `.list-leave-active` class
19- [ ] Ensure the parent container has `position: relative` if needed
20- [ ] Test with rapid add/remove operations to verify smooth animations
21 
22**Incorrect - Items jump instead of moving:**
23```vue
24<template>
25  <TransitionGroup name="list" tag="ul">
26    <li v-for="item in items" :key="item.id">
27      {{ item.name }}
28    </li>
29  </TransitionGroup>
30</template>
31 
32<style>
33/* INCOMPLETE: Missing move class and position absolute */
34.list-enter-active,
35.list-leave-active {
36  transition: all 0.5s ease;
37}
38 
39.list-enter-from,
40.list-leave-to {
41  opacity: 0;
42  transform: translateX(30px);
43}
44</style>
45```
46 
47**Correct - Smooth move transitions:**
48```vue
49<template>
50  <TransitionGroup name="list" tag="ul">
51    <li v-for="item in items" :key="item.id">
52      {{ item.name }}
53    </li>
54  </TransitionGroup>
55</template>
56 
57<style>
58/* CORRECT: Full set of classes for smooth animations */
59 
60/* Apply transition to moving elements */
61.list-move,
62.list-enter-active,
63.list-leave-active {
64  transition: all 0.5s ease;
65}
66 
67.list-enter-from,
68.list-leave-to {
69  opacity: 0;
70  transform: translateX(30px);
71}
72 
73/* CRITICAL: Take leaving items out of layout flow */
74.list-leave-active {
75  position: absolute;
76}
77</style>
78```
79 
80## Why This Works
81 
82The FLIP animation technique Vue uses internally needs to calculate element positions. When an item leaves:
83 
841. Without `position: absolute`: The leaving item still occupies space in the DOM
852. Other items can't move until the leaving item is fully removed
863. Result: Items snap to new positions after leave animation completes
87 
88With `position: absolute`:
89 
901. Leaving item is removed from normal layout flow immediately
912. Other items can begin moving into the vacated space
923. Result: Leaving animation and move animation happen simultaneously
93 
94## Visual Diagram
95 
96```
97Without position: absolute:
98[A] [B] [C] [D]  <- Remove B
99[A]     [C] [D]  <- B fading out, C/D waiting
100[A] [C] [D]      <- B gone, C/D jump instantly
101 
102With position: absolute:
103[A] [B] [C] [D]  <- Remove B
104[A][B][C] [D]    <- B fading (absolute), C/D sliding left
105[A] [C] [D]      <- Smooth completion
106```
107 
108## Additional Considerations
109 
110**Container Width:** When using `position: absolute`, items may need explicit widths:
111 
112```css
113.list-leave-active {
114  position: absolute;
115  width: 100%; /* Or specific width to maintain layout during leave */
116}
117```
118 
119**Stacking Context:** Leaving items with `position: absolute` may stack above other elements:
120 
121```css
122.list-leave-active {
123  position: absolute;
124  z-index: -1; /* Optional: put behind other items */
125}
126```
127 
128## Reference
129- [Vue.js TransitionGroup Move Transitions](https://vuejs.org/guide/built-ins/transition-group.html#move-transitions)
130- [FLIP Animation Technique](https://aerotwist.com/blog/flip-your-animations/)
131