0
# Animations
1

2
Animate.css integration providing curated animation class lists for smooth transitions and effects in web applications. Organized into logical categories for easy selection and usage.
3

4
## Capabilities
5

6
### Animation Lists
7

8
Pre-curated lists of animation class names from Animate.css v4.1.1.
9

10
```typescript { .api }
11
/**
12
 * Animation class name arrays from Animate.css
13
 * Each array contains strings that correspond to CSS animation classes
14
 */
15

16
/**
17
 * General animations - attention-seeking effects that can loop
18
 * Used for drawing attention to elements or indicating activity
19
 */
20
export declare const generalAnimations: string[];
21

22
/**
23
 * Entrance animations - effects for elements appearing/entering
24
 * Used when showing elements, modals, notifications, etc.
25
 */
26
export declare const inAnimations: string[];
27

28
/**
29
 * Exit animations - effects for elements disappearing/leaving
30
 * Used when hiding elements, closing modals, removing notifications, etc.
31
 */
32
export declare const outAnimations: string[];
33
```
34

35
### General Animations
36

37
Attention-seeking animations that can be used repeatedly or for ongoing effects.
38

39
```javascript { .api }
40
/**
41
 * General animations array contents
42
 * 16 attention-seeking animation classes
43
 */
44
const generalAnimations = [
45
  'bounce',        // Bouncing effect
46
  'flash',         // Flashing opacity
47
  'flip',          // 3D flip effect
48
  'headShake',     // Head shaking motion
49
  'heartBeat',     // Pulsing heart-like effect
50
  'hinge',         // Door hinge falling effect
51
  'jello',         // Jello-like wobbling
52
  'pulse',         // Subtle pulsing scale
53
  'rubberBand',    // Rubber band stretching
54
  'shake',         // Horizontal shaking
55
  'shakeX',        // Horizontal shake (alias)
56
  'shakeY',        // Vertical shaking
57
  'swing',         // Swinging pendulum motion
58
  'tada',          // Celebratory tada effect
59
  'wobble'         // Wobbling motion
60
];
61
```
62

63
### Entrance Animations
64

65
Animations for elements entering or appearing on screen.
66

67
```javascript { .api }
68
/**
69
 * Entrance animations array contents
70
 * 42 different entrance effect classes
71
 */
72
const inAnimations = [
73
  // Back in animations
74
  'backInDown',
75
  'backInLeft', 
76
  'backInRight',
77
  'backInUp',
78
  
79
  // Bounce in animations
80
  'bounceIn',
81
  'bounceInDown',
82
  'bounceInLeft',
83
  'bounceInRight', 
84
  'bounceInUp',
85
  
86
  // Fade in animations
87
  'fadeIn',
88
  'fadeInBottomLeft',
89
  'fadeInBottomRight',
90
  'fadeInDown',
91
  'fadeInDownBig',
92
  'fadeInLeft',
93
  'fadeInLeftBig',
94
  'fadeInRight',
95
  'fadeInRightBig',
96
  'fadeInTopLeft',
97
  'fadeInTopRight',
98
  'fadeInUp',
99
  'fadeInUpBig',
100
  
101
  // Flip in animations
102
  'flipInX',
103
  'flipInY',
104
  
105
  // Special entrance effects
106
  'jackInTheBox',
107
  'lightSpeedInLeft',
108
  'lightSpeedInRight',
109
  'rollIn',
110
  
111
  // Rotate in animations
112
  'rotateIn',
113
  'rotateInDownLeft',
114
  'rotateInDownRight',
115
  'rotateInUpLeft',
116
  'rotateInUpRight',
117
  
118
  // Slide in animations
119
  'slideInDown',
120
  'slideInLeft',
121
  'slideInRight',
122
  'slideInUp',
123
  
124
  // Zoom in animations
125
  'zoomIn',
126
  'zoomInDown',
127
  'zoomInLeft',
128
  'zoomInRight',
129
  'zoomInUp'
130
];
131
```
132

133
### Exit Animations
134

135
Animations for elements leaving or disappearing from screen.
136

137
```javascript { .api }
138
/**
139
 * Exit animations array contents
140
 * 42 different exit effect classes matching entrance animations
141
 */
142
const outAnimations = [
143
  // Back out animations
144
  'backOutDown',
145
  'backOutLeft',
146
  'backOutRight', 
147
  'backOutUp',
148
  
149
  // Bounce out animations
150
  'bounceOut',
151
  'bounceOutDown',
152
  'bounceOutLeft',
153
  'bounceOutRight',
154
  'bounceOutUp',
155
  
156
  // Fade out animations
157
  'fadeOut',
158
  'fadeOutBottomLeft',
159
  'fadeOutBottomRight',
160
  'fadeOutDown',
161
  'fadeOutDownBig',
162
  'fadeOutLeft',
163
  'fadeOutLeftBig', 
164
  'fadeOutRight',
165
  'fadeOutRightBig',
166
  'fadeOutTopLeft',
167
  'fadeOutTopRight',
168
  'fadeOutUp',
169
  'fadeOutUpBig',
170
  
171
  // Flip out animations
172
  'flipOutX',
173
  'flipOutY',
174
  
175
  // Special exit effects
176
  'lightSpeedOutLeft',
177
  'lightSpeedOutRight',
178
  'rollOut',
179
  
180
  // Rotate out animations
181
  'rotateOut',
182
  'rotateOutDownLeft',
183
  'rotateOutDownRight',
184
  'rotateOutUpLeft',
185
  'rotateOutUpRight',
186
  
187
  // Slide out animations
188
  'slideOutDown',
189
  'slideOutLeft',
190
  'slideOutRight',
191
  'slideOutUp',
192
  
193
  // Zoom out animations
194
  'zoomOut',
195
  'zoomOutDown',
196
  'zoomOutLeft',
197
  'zoomOutRight',
198
  'zoomOutUp'
199
];
200
```
201

202
**Usage Examples:**
203

204
```javascript
205
import { 
206
  generalAnimations, 
207
  inAnimations, 
208
  outAnimations 
209
} from "@quasar/extras/animate/animate-list.common";
210

211
// Use in Vue component
212
export default {
213
  data() {
214
    return {
215
      // Random selection from arrays
216
      attentionAnimation: generalAnimations[Math.floor(Math.random() * generalAnimations.length)],
217
      enterAnimation: inAnimations[Math.floor(Math.random() * inAnimations.length)],
218
      exitAnimation: outAnimations[Math.floor(Math.random() * outAnimations.length)]
219
    };
220
  },
221
  methods: {
222
    showElement() {
223
      // Apply entrance animation
224
      this.$el.classList.add('animate__animated', `animate__${this.enterAnimation}`);
225
    },
226
    hideElement() {
227
      // Apply exit animation
228
      this.$el.classList.add('animate__animated', `animate__${this.exitAnimation}`);
229
    },
230
    drawAttention() {
231
      // Apply attention animation
232
      this.$el.classList.add('animate__animated', `animate__${this.attentionAnimation}`);
233
    }
234
  }
235
}
236
```
237

238
## CSS Integration
239

240
### Animate.css Integration
241

242
To use these animations, you need to import Animate.css separately:
243

244
```css
245
/* Import Animate.css (not included in @quasar/extras) */
246
@import 'animate.css';
247

248
/* Or use CDN */
249
/* <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> */
250
```
251

252
### Basic Usage
253

254
```css { .api }
255
/* Basic animation class structure */
256
.animate__animated {
257
  animation-duration: 1s;
258
  animation-fill-mode: both;
259
}
260

261
/* Example usage with specific animation */
262
.animate__fadeIn {
263
  animation-name: fadeIn;
264
}
265

266
.animate__bounceOut {
267
  animation-name: bounceOut;
268
}
269
```
270

271
### HTML Usage
272

273
```html
274
<!-- Apply animations using class names from the arrays -->
275
<div class="animate__animated animate__fadeIn">
276
  Element with fade in animation
277
</div>
278

279
<div class="animate__animated animate__bounceOut">
280
  Element with bounce out animation
281
</div>
282

283
<div class="animate__animated animate__pulse animate__infinite">
284
  Element with infinite pulsing
285
</div>
286
```
287

288
## Quasar Integration
289

290
### Quasar Transitions
291

292
```javascript
293
// Use with Quasar transition components
294
<template>
295
  <transition
296
    :enter-active-class="`animate__animated animate__${enterAnimation}`"
297
    :leave-active-class="`animate__animated animate__${exitAnimation}`"
298
  >
299
    <div v-if="show" key="content">
300
      Animated content
301
    </div>
302
  </transition>
303
</template>
304

305
<script>
306
import { inAnimations, outAnimations } from "@quasar/extras/animate/animate-list.common";
307

308
export default {
309
  data() {
310
    return {
311
      show: false,
312
      enterAnimation: inAnimations[8], // "fadeIn"
313
      exitAnimation: outAnimations[8]  // "fadeOut"
314
    };
315
  }
316
}
317
</script>
318
```
319

320
### Quasar Dialog Integration
321

322
```javascript
323
// Use with Quasar dialogs
324
this.$q.dialog({
325
  title: 'Animated Dialog',
326
  message: 'This dialog has animations',
327
  transitionShow: `animate__animated animate__${inAnimations[0]}`,  // "backInDown"
328
  transitionHide: `animate__animated animate__${outAnimations[0]}`  // "backOutDown"
329
});
330
```
331

332
### Quasar Notify Integration
333

334
```javascript
335
// Use with Quasar notifications
336
this.$q.notify({
337
  message: 'Animated notification',
338
  classes: `animate__animated animate__${inAnimations[5]}`,  // "bounceInDown"
339
  timeout: 3000
340
});
341
```
342

343
## Animation Categories
344

345
### By Animation Type
346
- **Attention Seekers**: `generalAnimations` - for drawing attention
347
- **Entrances**: `inAnimations` - for revealing elements
348
- **Exits**: `outAnimations` - for hiding elements
349

350
### By Movement Direction
351
- **Vertical**: Up/Down movements (fadeInUp, slideOutDown, etc.)
352
- **Horizontal**: Left/Right movements (fadeInLeft, slideOutRight, etc.)
353
- **Diagonal**: Corner movements (fadeInTopLeft, fadeOutBottomRight, etc.)
354
- **Rotational**: Spinning effects (rotateIn, rotateOut, etc.)
355
- **Scale**: Size-based effects (zoomIn, zoomOut, bounceIn, etc.)
356

357
### By Visual Style
358
- **Fade**: Opacity-based transitions
359
- **Slide**: Position-based movements
360
- **Bounce**: Elastic, spring-like effects
361
- **Rotate**: 3D rotation effects
362
- **Flip**: 3D flip effects
363
- **Back**: Overshoot and settle effects
364

365
## Performance Considerations
366

367
### Animation Duration Control
368

369
```css
370
/* Customize animation timing */
371
.animate__animated {
372
  animation-duration: 0.5s; /* Faster animations */
373
}
374

375
.animate__slow {
376
  animation-duration: 2s;
377
}
378

379
.animate__slower {
380
  animation-duration: 3s;
381
}
382

383
.animate__fast {
384
  animation-duration: 800ms;
385
}
386

387
.animate__faster {
388
  animation-duration: 500ms;
389
}
390
```
391

392
### Hardware Acceleration
393

394
Most Animate.css animations are optimized for hardware acceleration using CSS transforms and opacity changes for smooth performance.
395

396
## Common Use Cases
397

398
- **Page Transitions**: Use entrance/exit animations for route changes
399
- **Modal Dialogs**: Animate dialog appearance and disappearance
400
- **Notifications**: Add entrance animations to toast notifications
401
- **Loading States**: Use attention animations for loading indicators
402
- **Button Feedback**: Apply quick attention animations on user interactions
403
- **Content Reveals**: Use entrance animations for progressive content disclosure