1---
2title: Use Class-based Animations for Non-Enter/Leave Effects
3impact: LOW
4impactDescription: Class-based animations are simpler and more performant for elements that remain in the DOM
5type: best-practice
6tags: [vue3, animation, css, class-binding, state]
7---
8 
9# Use Class-based Animations for Non-Enter/Leave Effects
10 
11**Impact: LOW** - For animations on elements that are not entering or leaving the DOM, use CSS class-based animations triggered by Vue's reactive state. This is simpler than `<Transition>` and more appropriate for feedback animations like shake, pulse, or highlight effects.
12 
13## Task List
14 
15- Use class-based animations for elements staying in the DOM
16- Use `<Transition>` only for enter/leave animations
17- Combine CSS animations with Vue's class bindings (`:class`)
18- Consider using `setTimeout` to auto-remove animation classes
19 
20**When to Use Class-based Animations:**
21- User feedback (shake on error, pulse on success)
22- Attention-grabbing effects (highlight changes)
23- Hover/focus states that need more than CSS transitions
24- Any animation where the element stays mounted
25 
26**When to Use Transition Component:**
27- Elements entering/leaving the DOM (v-if/v-show)
28- Route transitions
29- List item additions/removals
30 
31## Basic Pattern
32 
33```vue
34<template>
35  <div :class="{ shake: showError }">
36    <button @click="submitForm">Submit</button>
37    <span v-if="showError">This feature is disabled!</span>
38  </div>
39</template>
40 
41<script setup>
42import { ref } from 'vue'
43 
44const showError = ref(false)
45 
46function submitForm() {
47  if (!isValid()) {
48    // Trigger shake animation
49    showError.value = true
50 
51    // Auto-remove class after animation completes
52    setTimeout(() => {
53      showError.value = false
54    }, 820)  // Match animation duration
55  }
56}
57</script>
58 
59<style>
60.shake {
61  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
62  transform: translate3d(0, 0, 0);  /* Enable GPU acceleration */
63}
64 
65@keyframes shake {
66  10%, 90% { transform: translate3d(-1px, 0, 0); }
67  20%, 80% { transform: translate3d(2px, 0, 0); }
68  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
69  40%, 60% { transform: translate3d(4px, 0, 0); }
70}
71</style>
72```
73 
74## Common Animation Patterns
75 
76### Pulse on Success
77 
78```vue
79<template>
80  <button
81    @click="save"
82    :class="{ pulse: saved }"
83  >
84    {{ saved ? 'Saved!' : 'Save' }}
85  </button>
86</template>
87 
88<script setup>
89import { ref } from 'vue'
90 
91const saved = ref(false)
92 
93async function save() {
94  await saveData()
95  saved.value = true
96  setTimeout(() => saved.value = false, 1000)
97}
98</script>
99 
100<style>
101.pulse {
102  animation: pulse 0.5s ease-in-out;
103}
104 
105@keyframes pulse {
106  0%, 100% { transform: scale(1); }
107  50% { transform: scale(1.05); }
108}
109</style>
110```
111 
112### Highlight on Change
113 
114```vue
115<template>
116  <div
117    :class="{ highlight: justUpdated }"
118  >
119    Value: {{ value }}
120  </div>
121</template>
122 
123<script setup>
124import { ref, watch } from 'vue'
125 
126const value = ref(0)
127const justUpdated = ref(false)
128 
129watch(value, () => {
130  justUpdated.value = true
131  setTimeout(() => justUpdated.value = false, 1000)
132})
133</script>
134 
135<style>
136.highlight {
137  animation: highlight 1s ease-out;
138}
139 
140@keyframes highlight {
141  0% { background-color: yellow; }
142  100% { background-color: transparent; }
143}
144</style>
145```
146 
147### Bounce Attention
148 
149```vue
150<template>
151  <div
152    :class="{ bounce: needsAttention }"
153    @animationend="needsAttention = false"
154  >
155    <BellIcon />
156  </div>
157</template>
158 
159<script setup>
160import { ref } from 'vue'
161 
162const needsAttention = ref(false)
163 
164function notifyUser() {
165  needsAttention.value = true
166  // No setTimeout needed - using animationend event
167}
168</script>
169 
170<style>
171.bounce {
172  animation: bounce 0.5s ease;
173}
174 
175@keyframes bounce {
176  0%, 100% { transform: translateY(0); }
177  50% { transform: translateY(-10px); }
178}
179</style>
180```
181 
182## Using animationend Event
183 
184Instead of `setTimeout`, use the `animationend` event for cleaner code:
185 
186```vue
187<template>
188  <div
189    :class="{ animate: isAnimating }"
190    @animationend="isAnimating = false"
191  >
192    Content
193  </div>
194</template>
195 
196<script setup>
197import { ref } from 'vue'
198 
199const isAnimating = ref(false)
200 
201function triggerAnimation() {
202  isAnimating.value = true
203  // Class is automatically removed when animation ends
204}
205</script>
206```
207 
208## Composable for Reusable Animations
209 
210```javascript
211// composables/useAnimation.js
212import { ref } from 'vue'
213 
214export function useAnimation(duration = 500) {
215  const isAnimating = ref(false)
216 
217  function trigger() {
218    isAnimating.value = true
219    setTimeout(() => {
220      isAnimating.value = false
221    }, duration)
222  }
223 
224  return {
225    isAnimating,
226    trigger
227  }
228}
229```
230 
231```vue
232<script setup>
233import { useAnimation } from '@/composables/useAnimation'
234 
235const shake = useAnimation(820)
236const pulse = useAnimation(500)
237</script>
238 
239<template>
240  <button
241    :class="{ shake: shake.isAnimating.value }"
242    @click="shake.trigger()"
243  >
244    Shake me
245  </button>
246 
247  <button
248    :class="{ pulse: pulse.isAnimating.value }"
249    @click="pulse.trigger()"
250  >
251    Pulse me
252  </button>
253</template>
254```
255