0
# Transitions
1
2
Built-in animation components for smooth toast transitions, plus utilities for creating custom animations. React Toastify provides four pre-built transition components and a flexible system for creating custom transitions.
3
4
## Capabilities
5
6
### Built-in Transition Components
7
8
Pre-built animation components ready to use with ToastContainer.
9
10
```typescript { .api }
11
/**
12
* Bounce animation transition - toasts bounce in and out
13
*/
14
const Bounce: React.FC<ToastTransitionProps>;
15
16
/**
17
* Slide animation transition - toasts slide in from the side
18
*/
19
const Slide: React.FC<ToastTransitionProps>;
20
21
/**
22
* Zoom animation transition - toasts zoom in and out with scale effect
23
*/
24
const Zoom: React.FC<ToastTransitionProps>;
25
26
/**
27
* Flip animation transition - toasts flip in with a 3D rotation effect
28
*/
29
const Flip: React.FC<ToastTransitionProps>;
30
31
interface ToastTransitionProps {
32
isIn: boolean;
33
done: () => void;
34
position: ToastPosition | string;
35
preventExitTransition: boolean;
36
nodeRef: React.RefObject<HTMLElement>;
37
children?: React.ReactNode;
38
playToast(): void;
39
}
40
```
41
42
**Usage Examples:**
43
44
```typescript
45
import { ToastContainer, Bounce, Slide, Zoom, Flip } from 'react-toastify';
46
47
// Bounce transition (default)
48
<ToastContainer transition={Bounce} />
49
50
// Slide transition
51
<ToastContainer transition={Slide} />
52
53
// Zoom transition
54
<ToastContainer transition={Zoom} />
55
56
// Flip transition
57
<ToastContainer transition={Flip} />
58
```
59
60
### Bounce Transition
61
62
The default transition with a bouncy spring animation.
63
64
```typescript { .api }
65
/**
66
* Bounce transition provides a spring-like bounce effect
67
* - Entry: Bounces in from the edge with spring physics
68
* - Exit: Bounces out with fade effect
69
* - Best for: Playful, attention-grabbing notifications
70
*/
71
const Bounce: React.FC<ToastTransitionProps>;
72
```
73
74
**Usage Example:**
75
76
```typescript
77
import { ToastContainer, Bounce } from 'react-toastify';
78
79
<ToastContainer
80
transition={Bounce}
81
position="top-right"
82
/>
83
```
84
85
### Slide Transition
86
87
Smooth sliding animation from the container edge.
88
89
```typescript { .api }
90
/**
91
* Slide transition provides smooth sliding motion
92
* - Entry: Slides in from the appropriate edge based on position
93
* - Exit: Slides out to the same edge
94
* - Best for: Clean, professional interfaces
95
*/
96
const Slide: React.FC<ToastTransitionProps>;
97
```
98
99
**Usage Example:**
100
101
```typescript
102
import { ToastContainer, Slide } from 'react-toastify';
103
104
<ToastContainer
105
transition={Slide}
106
position="bottom-center"
107
/>
108
```
109
110
### Zoom Transition
111
112
Scale-based zoom animation with opacity changes.
113
114
```typescript { .api }
115
/**
116
* Zoom transition provides scale-based animation
117
* - Entry: Zooms in from small scale with fade in
118
* - Exit: Zooms out to small scale with fade out
119
* - Best for: Modern, subtle animations
120
*/
121
const Zoom: React.FC<ToastTransitionProps>;
122
```
123
124
**Usage Example:**
125
126
```typescript
127
import { ToastContainer, Zoom } from 'react-toastify';
128
129
<ToastContainer
130
transition={Zoom}
131
position="top-center"
132
/>
133
```
134
135
### Flip Transition
136
137
3D rotation animation for dramatic effect.
138
139
```typescript { .api }
140
/**
141
* Flip transition provides 3D rotation animation
142
* - Entry: Flips in with Y-axis rotation
143
* - Exit: Flips out with Y-axis rotation
144
* - Best for: Dynamic, engaging user experiences
145
*/
146
const Flip: React.FC<ToastTransitionProps>;
147
```
148
149
**Usage Example:**
150
151
```typescript
152
import { ToastContainer, Flip } from 'react-toastify';
153
154
<ToastContainer
155
transition={Flip}
156
position="top-left"
157
/>
158
```
159
160
### Custom Transitions with cssTransition
161
162
Create custom transition animations using CSS classes.
163
164
```typescript { .api }
165
/**
166
* Creates a custom transition component using CSS classes
167
* @param config - Configuration object defining CSS classes for animation states
168
* @returns Custom transition component
169
*/
170
function cssTransition(config: CSSTransitionProps): React.FC<ToastTransitionProps>;
171
172
interface CSSTransitionProps {
173
/** CSS class applied when toast is entering */
174
enter: string;
175
/** CSS class applied when toast is entered/visible */
176
enterActive?: string;
177
/** CSS class applied when toast is exiting */
178
exit: string;
179
/** CSS class applied when toast is exited/hidden */
180
exitActive?: string;
181
/** Optional duration in milliseconds */
182
duration?: number | { enter: number; exit: number };
183
/** Whether to append position-based classes */
184
appendPosition?: boolean;
185
/** Collapse toast height on exit */
186
collapse?: boolean;
187
/** Collapse duration in milliseconds */
188
collapseDuration?: number;
189
}
190
```
191
192
**Custom Transition Example:**
193
194
```typescript
195
import { cssTransition, ToastContainer } from 'react-toastify';
196
197
// Create custom fade transition
198
const CustomFade = cssTransition({
199
enter: 'custom-fade-enter',
200
exit: 'custom-fade-exit',
201
collapse: true,
202
collapseDuration: 300
203
});
204
205
// CSS (in your stylesheet)
206
/*
207
.custom-fade-enter {
208
animation: customFadeIn 300ms ease-in-out;
209
}
210
211
.custom-fade-exit {
212
animation: customFadeOut 300ms ease-in-out;
213
}
214
215
@keyframes customFadeIn {
216
from {
217
opacity: 0;
218
transform: translateY(-20px);
219
}
220
to {
221
opacity: 1;
222
transform: translateY(0);
223
}
224
}
225
226
@keyframes customFadeOut {
227
from {
228
opacity: 1;
229
transform: translateY(0);
230
}
231
to {
232
opacity: 0;
233
transform: translateY(-20px);
234
}
235
}
236
*/
237
238
// Use the custom transition
239
<ToastContainer transition={CustomFade} />
240
```
241
242
### Position-Specific Transitions
243
244
Transitions can adapt to different container positions when `appendPosition` is enabled.
245
246
```typescript
247
// Position-specific classes are automatically appended
248
const SlideWithPosition = cssTransition({
249
enter: 'slide-enter',
250
exit: 'slide-exit',
251
appendPosition: true // Enables position-specific classes
252
});
253
254
// Generated classes will be:
255
// - slide-enter--top-right
256
// - slide-enter--bottom-left
257
// - etc.
258
```
259
260
**CSS Example for Position-Specific Transitions:**
261
262
```css
263
/* Base slide animation */
264
.slide-enter {
265
opacity: 0;
266
}
267
268
.slide-enter-active {
269
opacity: 1;
270
transition: opacity 300ms, transform 300ms;
271
}
272
273
/* Position-specific entry animations */
274
.slide-enter--top-right,
275
.slide-enter--top-left {
276
transform: translateY(-100%);
277
}
278
279
.slide-enter--bottom-right,
280
.slide-enter--bottom-left {
281
transform: translateY(100%);
282
}
283
284
.slide-enter--top-center {
285
transform: translateY(-100%);
286
}
287
288
.slide-enter--bottom-center {
289
transform: translateY(100%);
290
}
291
```
292
293
294
### Collapse Animation
295
296
Control height collapse behavior during exit animations.
297
298
```typescript { .api }
299
// Enable height collapse on exit
300
collapse?: boolean;
301
302
// Duration for collapse animation (separate from main transition)
303
collapseDuration?: number;
304
```
305
306
**Usage Example:**
307
308
```typescript
309
const CollapsingFade = cssTransition({
310
enter: 'fade-enter',
311
exit: 'fade-exit',
312
duration: 300,
313
collapse: true, // Enable height collapse
314
collapseDuration: 200 // Collapse after fade completes
315
});
316
```
317
318
## Advanced Transition Patterns
319
320
### Staggered Animations
321
322
Create staggered animations for multiple toasts.
323
324
```typescript
325
const StaggeredSlide = cssTransition({
326
enter: 'stagger-enter',
327
exit: 'stagger-exit',
328
duration: 400
329
});
330
331
// CSS with animation delays
332
/*
333
.stagger-enter {
334
opacity: 0;
335
transform: translateX(100%);
336
animation-delay: calc(var(--toast-index, 0) * 50ms);
337
}
338
*/
339
```
340
341
### Theme-Aware Transitions
342
343
Create transitions that adapt to the current theme.
344
345
```typescript
346
const ThemeAwareSlide = cssTransition({
347
enter: 'theme-slide-enter',
348
exit: 'theme-slide-exit',
349
duration: 300
350
});
351
352
// CSS that responds to theme classes
353
/*
354
.Toastify__toast-theme--light .theme-slide-enter {
355
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
356
}
357
358
.Toastify__toast-theme--dark .theme-slide-enter {
359
box-shadow: 0 4px 12px rgba(255,255,255,0.15);
360
}
361
*/
362
```
363
364
## Support Types
365
366
```typescript { .api }
367
type ToastTransition = React.FC<ToastTransitionProps>;
368
369
interface ToastTransitionProps {
370
isIn: boolean;
371
done: () => void;
372
position: ToastPosition;
373
preventExitTransition?: boolean;
374
nodeRef: React.RefObject<HTMLElement>;
375
children?: React.ReactNode;
376
}
377
```