1---
2title: Use Key Attribute to Force Re-render Animations
3impact: MEDIUM
4impactDescription: Without key attributes, Vue reuses DOM elements and animation libraries like AutoAnimate cannot detect changes to animate
5type: gotcha
6tags: [vue3, animation, key, autoanimate, rerender, dom]
7---
8 
9# Use Key Attribute to Force Re-render Animations
10 
11**Impact: MEDIUM** - Vue optimizes performance by reusing DOM elements when possible. However, this optimization can prevent animation libraries (like AutoAnimate) from detecting changes, because the element is updated in place rather than re-created. Adding a `:key` attribute forces Vue to treat changed elements as new, triggering proper animations.
12 
13## Task Checklist
14 
15- [ ] Add `:key` to elements that should animate when their content changes
16- [ ] Use unique, changing values for keys (not indices)
17- [ ] For route transitions, add `:key="$route.fullPath"` to `<router-view>`
18- [ ] Apply `v-auto-animate` to the parent element of keyed children
19 
20**Problematic Code:**
21```vue
22<template>
23  <!-- BAD: Text changes but no animation occurs -->
24  <div v-auto-animate>
25    <p>{{ message }}</p>  <!-- No key - element is reused -->
26  </div>
27 
28  <!-- BAD: Image source changes but no animation -->
29  <div v-auto-animate>
30    <img :src="imageUrl" />  <!-- No key - element is reused -->
31  </div>
32 
33  <!-- BAD: Route changes don't animate -->
34  <router-view v-auto-animate />  <!-- No key -->
35</template>
36 
37<script setup>
38import { ref } from 'vue'
39 
40const message = ref('Hello')
41const imageUrl = ref('/images/photo1.jpg')
42 
43// Changing these won't trigger animations because
44// Vue updates the existing elements rather than replacing them
45</script>
46```
47 
48**Correct Code:**
49```vue
50<template>
51  <!-- GOOD: Key forces re-render, triggering animation -->
52  <div v-auto-animate>
53    <p :key="message">{{ message }}</p>
54  </div>
55 
56  <!-- GOOD: Image animates when source changes -->
57  <div v-auto-animate>
58    <img :key="imageUrl" :src="imageUrl" />
59  </div>
60 
61  <!-- GOOD: Route changes animate properly -->
62  <router-view :key="$route.fullPath" v-auto-animate />
63</template>
64 
65<script setup>
66import { ref } from 'vue'
67 
68const message = ref('Hello')
69const imageUrl = ref('/images/photo1.jpg')
70 
71// Now changing these will trigger animations
72function updateMessage() {
73  message.value = 'World'  // Triggers enter animation for new <p>
74}
75</script>
76```
77 
78## Why This Works
79 
80When Vue sees a `:key` change:
811. It considers the old element and new element as different
822. The old element is removed (triggering leave animation)
833. A new element is created (triggering enter animation)
84 
85Without `:key`:
861. Vue sees the same element type in the same position
872. It updates the element's properties in place
883. No DOM addition/removal occurs, so no animation triggers
89 
90## Common Use Cases
91 
92### Animating Text Content Changes
93 
94```vue
95<template>
96  <div v-auto-animate>
97    <h1 :key="title">{{ title }}</h1>
98    <p :key="description">{{ description }}</p>
99  </div>
100</template>
101```
102 
103### Animating Dynamic Components
104 
105```vue
106<template>
107  <div v-auto-animate>
108    <component :is="currentComponent" :key="currentComponent" />
109  </div>
110</template>
111```
112 
113### Animating Route Transitions
114 
115```vue
116<template>
117  <router-view v-slot="{ Component, route }">
118    <div v-auto-animate>
119      <component :is="Component" :key="route.fullPath" />
120    </div>
121  </router-view>
122</template>
123```
124 
125## With Vue's Built-in Transition
126 
127The same principle applies to Vue's `<Transition>` component:
128 
129```vue
130<template>
131  <!-- GOOD: Key triggers transition on content change -->
132  <Transition name="fade" mode="out-in">
133    <p :key="message">{{ message }}</p>
134  </Transition>
135 
136  <!-- GOOD: Different keys for conditional content -->
137  <Transition name="fade" mode="out-in">
138    <div v-if="isLoading" key="loading">Loading...</div>
139    <div v-else key="content">{{ content }}</div>
140  </Transition>
141</template>
142```
143 
144## Caution: Performance Implications
145 
146Using `:key` forces full component re-creation. For frequently changing data:
147- The entire component tree under the keyed element is destroyed and recreated
148- Any component state is lost
149- Consider whether the animation is worth the performance cost
150 
151```vue
152<!-- Be cautious with complex components -->
153<ComplexDashboard :key="refreshTrigger" />
154<!-- This destroys and recreates the entire dashboard! -->
155```
156 
157## Reference
158- [Vue.js Animation Techniques](https://vuejs.org/guide/extras/animation.html)
159- [AutoAnimate with Vue](https://auto-animate.formkit.com/#usage-vue)
160- [Vue.js v-for with key](https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key)
161