0
# Transitions
1
2
Vuetify provides 17 built-in transition components for smooth animations and visual effects. These include CSS-based transitions for common effects, JavaScript-based expand transitions, and specialized dialog transitions.
3
4
## Capabilities
5
6
### CSS Transitions
7
8
Standard CSS-based transitions with configurable timing and easing.
9
10
```typescript { .api }
11
/**
12
* Standard fade transition with configurable opacity changes
13
*/
14
const VFadeTransition: Component;
15
16
/**
17
* Scale transition for zoom-in/zoom-out effects
18
*/
19
const VScaleTransition: Component;
20
21
/**
22
* Slide transition along the X-axis (left to right)
23
*/
24
const VSlideXTransition: Component;
25
26
/**
27
* Reverse slide transition along the X-axis (right to left)
28
*/
29
const VSlideXReverseTransition: Component;
30
31
/**
32
* Slide transition along the Y-axis (top to bottom)
33
*/
34
const VSlideYTransition: Component;
35
36
/**
37
* Reverse slide transition along the Y-axis (bottom to top)
38
*/
39
const VSlideYReverseTransition: Component;
40
41
/**
42
* Scroll transition along the X-axis
43
*/
44
const VScrollXTransition: Component;
45
46
/**
47
* Reverse scroll transition along the X-axis
48
*/
49
const VScrollXReverseTransition: Component;
50
51
/**
52
* Scroll transition along the Y-axis
53
*/
54
const VScrollYTransition: Component;
55
56
/**
57
* Reverse scroll transition along the Y-axis
58
*/
59
const VScrollYReverseTransition: Component;
60
61
/**
62
* FAB (Floating Action Button) transition with rotation and scale
63
*/
64
const VFabTransition: Component;
65
```
66
67
### JavaScript Transitions
68
69
Height and width expansion transitions using JavaScript for smooth animation.
70
71
```typescript { .api }
72
/**
73
* Expand/collapse transition that animates element height
74
* Commonly used for accordions and collapsible content
75
*/
76
const VExpandTransition: Component;
77
78
/**
79
* Expand/collapse transition that animates element width
80
* Useful for horizontal expanding content
81
*/
82
const VExpandXTransition: Component;
83
```
84
85
### Dialog Transitions
86
87
Specialized transitions designed for dialog and modal animations.
88
89
```typescript { .api }
90
/**
91
* Generic dialog transition with scale and fade effects
92
*/
93
const VDialogTransition: Component;
94
95
/**
96
* Dialog transition that slides in from the bottom
97
*/
98
const VDialogBottomTransition: Component;
99
100
/**
101
* Dialog transition that slides in from the top
102
*/
103
const VDialogTopTransition: Component;
104
```
105
106
## Usage Examples
107
108
### Basic CSS Transitions
109
110
```typescript
111
import { VFadeTransition, VSlideYTransition } from 'vuetify/components';
112
113
// Template usage
114
<template>
115
<div>
116
<!-- Fade transition -->
117
<VFadeTransition>
118
<div v-if="show" class="content">
119
Content that fades in/out
120
</div>
121
</VFadeTransition>
122
123
<!-- Slide transition -->
124
<VSlideYTransition>
125
<VCard v-if="showCard" class="mx-auto" max-width="400">
126
<VCardText>Card that slides in from top</VCardText>
127
</VCard>
128
</VSlideYTransition>
129
</div>
130
</template>
131
```
132
133
### Expand Transitions
134
135
```typescript
136
import { VExpandTransition } from 'vuetify/components';
137
138
// Template usage for collapsible content
139
<template>
140
<div>
141
<VBtn @click="expanded = !expanded">
142
Toggle Content
143
</VBtn>
144
145
<VExpandTransition>
146
<div v-if="expanded">
147
<VCard class="mt-4">
148
<VCardText>
149
This content expands and collapses smoothly
150
by animating the height property.
151
</VCardText>
152
</VCard>
153
</div>
154
</VExpandTransition>
155
</div>
156
</template>
157
```
158
159
### Dialog Transitions
160
161
```typescript
162
import { VDialog, VDialogTransition } from 'vuetify/components';
163
164
// Template usage for modal dialogs
165
<template>
166
<VDialog v-model="dialog" max-width="500">
167
<template #activator="{ props }">
168
<VBtn v-bind="props">Open Dialog</VBtn>
169
</template>
170
171
<!-- Custom transition for dialog -->
172
<VDialogTransition>
173
<VCard>
174
<VCardTitle>Dialog with Custom Transition</VCardTitle>
175
<VCardText>
176
This dialog uses a custom transition effect.
177
</VCardText>
178
<VCardActions>
179
<VBtn @click="dialog = false">Close</VBtn>
180
</VCardActions>
181
</VCard>
182
</VDialogTransition>
183
</VDialog>
184
</template>
185
```
186
187
## Transition Props
188
189
All transition components support standard Vue transition props:
190
191
```typescript { .api }
192
interface TransitionProps {
193
/** Enable/disable the transition */
194
disabled?: boolean;
195
/** Transition group mode */
196
group?: boolean;
197
/** Hide element when transition completes */
198
hideOnLeave?: boolean;
199
/** Leave absolute positioning during transition */
200
leaveAbsolute?: boolean;
201
/** Transition mode (in-out, out-in) */
202
mode?: 'in-out' | 'out-in';
203
/** Transition origin point */
204
origin?: string;
205
}
206
```
207
208
## Import Paths
209
210
```typescript
211
// Import all transitions
212
import * as transitions from 'vuetify/components/transitions';
213
214
// Import individual transitions
215
import {
216
VFadeTransition,
217
VSlideYTransition,
218
VExpandTransition,
219
VDialogTransition
220
} from 'vuetify/components';
221
222
// Direct path imports
223
import VFadeTransition from 'vuetify/components/VFadeTransition';
224
```
225
226
## Common Patterns
227
228
### List Transitions
229
230
```typescript
231
// Animate list items with staggered delays
232
<template>
233
<TransitionGroup name="list" tag="div">
234
<VCard
235
v-for="item in items"
236
:key="item.id"
237
class="list-item mb-2"
238
>
239
<VCardText>{{ item.text }}</VCardText>
240
</VCard>
241
</TransitionGroup>
242
</template>
243
244
<style>
245
.list-enter-active,
246
.list-leave-active {
247
transition: all 0.3s ease;
248
}
249
.list-enter-from,
250
.list-leave-to {
251
opacity: 0;
252
transform: translateX(30px);
253
}
254
</style>
255
```
256
257
### Route Transitions
258
259
```typescript
260
// Use transitions with Vue Router
261
<template>
262
<VSlideXTransition mode="out-in">
263
<router-view :key="$route.path" />
264
</VSlideXTransition>
265
</template>
266
```