1---
2title: TransitionGroup Performance with Large Lists and CSS Frameworks
3impact: MEDIUM
4impactDescription: TransitionGroup can cause noticeable DOM update lag when animating list changes, especially with CSS frameworks
5type: gotcha
6tags: [vue3, transition-group, animation, performance, list, css-framework]
7---
8 
9# TransitionGroup Performance with Large Lists and CSS Frameworks
10 
11**Impact: MEDIUM** - Vue's `<TransitionGroup>` can experience significant DOM update lag when animating list changes, particularly when:
12- Using CSS frameworks (Tailwind, Bootstrap, etc.)
13- Performing array operations like `slice()` that change multiple items
14- Working with larger lists
15 
16Without TransitionGroup, DOM updates occur instantly. With it, there can be noticeable delay before the UI reflects changes.
17 
18## Task Checklist
19 
20- [ ] For frequently updated lists, consider if transition animations are necessary
21- [ ] Use CSS `content-visibility: auto` for long lists to reduce render cost
22- [ ] Minimize CSS framework classes on list items during transitions
23- [ ] Consider virtual scrolling for very large animated lists
24- [ ] Profile with Vue DevTools to identify transition bottlenecks
25 
26**Problematic Pattern:**
27```vue
28<template>
29  <!-- Potentially slow with large lists or complex CSS -->
30  <TransitionGroup name="list" tag="ul">
31    <li
32      v-for="item in items"
33      :key="item.id"
34      class="p-4 m-2 rounded-lg shadow-md bg-gradient-to-r from-blue-500 to-purple-600
35             hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105
36             border border-gray-200 flex items-center justify-between"
37    >
38      {{ item.name }}
39    </li>
40  </TransitionGroup>
41</template>
42 
43<script setup>
44import { ref } from 'vue'
45 
46const items = ref([/* many items */])
47 
48// Operations like slice can cause visible lag
49function removeItems() {
50  items.value = items.value.slice(5)  // May lag with TransitionGroup
51}
52</script>
53 
54<style>
55.list-move,
56.list-enter-active,
57.list-leave-active {
58  transition: all 0.5s ease;
59}
60</style>
61```
62 
63**Optimized Approach:**
64```vue
65<template>
66  <!-- Simpler classes, shorter transitions -->
67  <TransitionGroup name="list" tag="ul" class="relative">
68    <li
69      v-for="item in items"
70      :key="item.id"
71      class="list-item"
72    >
73      {{ item.name }}
74    </li>
75  </TransitionGroup>
76</template>
77 
78<script setup>
79import { ref, computed } from 'vue'
80 
81const items = ref([/* items */])
82 
83// For large batch operations, consider disabling animations temporarily
84const isAnimating = ref(true)
85</script>
86 
87<style>
88/* Keep transition CSS simple and specific */
89.list-item {
90  /* Minimal styles during animation */
91  padding: 1rem;
92}
93 
94.list-move {
95  transition: transform 0.3s ease;  /* Shorter duration */
96}
97 
98.list-enter-active,
99.list-leave-active {
100  transition: opacity 0.2s ease, transform 0.2s ease;
101}
102 
103.list-enter-from,
104.list-leave-to {
105  opacity: 0;
106  transform: translateX(-20px);
107}
108 
109/* Use will-change sparingly */
110.list-enter-active {
111  will-change: opacity, transform;
112}
113 
114/* Absolute positioning for leaving elements prevents layout thrashing */
115.list-leave-active {
116  position: absolute;
117  width: 100%;
118}
119</style>
120```
121 
122## Performance Optimization Strategies
123 
124### 1. Skip Animations for Bulk Operations
125 
126```vue
127<template>
128  <TransitionGroup v-if="animationsEnabled" name="list" tag="ul">
129    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
130  </TransitionGroup>
131 
132  <!-- Instant update without animations -->
133  <ul v-else>
134    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
135  </ul>
136</template>
137 
138<script setup>
139import { ref, nextTick } from 'vue'
140 
141const animationsEnabled = ref(true)
142 
143async function bulkUpdate(newItems) {
144  // Disable animations for bulk operations
145  animationsEnabled.value = false
146  items.value = newItems
147  await nextTick()
148  animationsEnabled.value = true
149}
150</script>
151```
152 
153### 2. Virtual Scrolling for Large Lists
154 
155```vue
156<template>
157  <!-- Use a virtual list library for large datasets -->
158  <RecycleScroller
159    :items="items"
160    :item-size="50"
161    key-field="id"
162    v-slot="{ item }"
163  >
164    <div class="list-item">{{ item.name }}</div>
165  </RecycleScroller>
166</template>
167 
168<script setup>
169import { RecycleScroller } from 'vue-virtual-scroller'
170</script>
171```
172 
173### 3. Reduce CSS Complexity During Transitions
174 
175```vue
176<style>
177/* Move complex styles to a stable wrapper */
178.list-item-wrapper {
179  @apply p-4 m-2 rounded-lg shadow-md bg-gradient-to-r from-blue-500 to-purple-600;
180}
181 
182/* Keep animated element styles minimal */
183.list-item {
184  /* Only essential layout styles */
185}
186 
187.list-move,
188.list-enter-active,
189.list-leave-active {
190  /* Only animate transform/opacity - GPU accelerated */
191  transition: transform 0.3s ease, opacity 0.3s ease;
192}
193</style>
194```
195 
196### 4. Use CSS content-visibility
197 
198```css
199/* For very long lists, defer rendering of off-screen items */
200.list-item {
201  content-visibility: auto;
202  contain-intrinsic-size: 0 50px; /* Estimated height */
203}
204```
205 
206## When to Avoid TransitionGroup
207 
208Consider alternatives when:
209- List updates are frequent (real-time data)
210- List contains 100+ items
211- Items have complex CSS or nested components
212- Performance is critical (mobile, low-end devices)
213 
214```vue
215<!-- Simple alternative: CSS-only animations on individual items -->
216<ul>
217  <li
218    v-for="item in items"
219    :key="item.id"
220    class="animate-in"
221  >
222    {{ item.name }}
223  </li>
224</ul>
225 
226<style>
227@keyframes fadeIn {
228  from { opacity: 0; transform: translateY(-10px); }
229  to { opacity: 1; transform: translateY(0); }
230}
231 
232.animate-in {
233  animation: fadeIn 0.3s ease forwards;
234}
235</style>
236```
237 
238## Reference
239- [Vue.js TransitionGroup](https://vuejs.org/guide/built-ins/transition-group.html)
240- [GitHub Issue: transition-group DOM update lag](https://github.com/vuejs/vue/issues/5845)
241- [Vue Virtual Scroller](https://github.com/Akryum/vue-virtual-scroller)
242