0
# Animation and Motion
1

2
Motion configuration using rc-motion for smooth popup transitions and mask animations. The animation system supports both modern motion props and legacy animation configurations.
3

4
## Capabilities
5

6
### Motion Configuration
7

8
Modern animation configuration using rc-motion for smooth, performant transitions.
9

10
```typescript { .api }
11
/**
12
 * Motion configuration for popup and mask animations
13
 */
14
interface TriggerProps {
15
  /** RC-Motion configuration for popup animations */
16
  popupMotion?: CSSMotionProps;
17
  
18
  /** RC-Motion configuration for mask animations */
19
  maskMotion?: CSSMotionProps;
20
}
21

22
/**
23
 * RC-Motion properties (from rc-motion library)
24
 */
25
interface CSSMotionProps {
26
  /** CSS class name or object for motion styling */
27
  motionName?: string | {
28
    appear?: string;
29
    enter?: string;
30
    leave?: string;
31
    appearActive?: string;
32
    enterActive?: string;
33
    leaveActive?: string;
34
  };
35
  
36
  /** Whether to trigger motion on initial mount */
37
  motionAppear?: boolean;
38
  
39
  /** Whether to trigger motion on enter */
40
  motionEnter?: boolean;
41
  
42
  /** Whether to trigger motion on leave */
43
  motionLeave?: boolean;
44
  
45
  /** Motion event callbacks */
46
  onAppearStart?: (element: HTMLElement) => void;
47
  onEnterStart?: (element: HTMLElement) => void;
48
  onLeaveStart?: (element: HTMLElement) => void;
49
  onAppearActive?: (element: HTMLElement) => void;
50
  onEnterActive?: (element: HTMLElement) => void;
51
  onLeaveActive?: (element: HTMLElement) => void;
52
  onAppearEnd?: (element: HTMLElement) => void;
53
  onEnterEnd?: (element: HTMLElement) => void;
54
  onLeaveEnd?: (element: HTMLElement) => void;
55
  
56
  /** Remove element from DOM after leave animation */
57
  removeOnLeave?: boolean;
58
  
59
  /** Force render even when not visible (for enter animations) */
60
  forceRender?: boolean;
61
  
62
  /** Deadline for motion to complete (ms) */
63
  motionDeadline?: number;
64
}
65
```
66

67
### Legacy Animation Support
68

69
Deprecated animation properties maintained for backwards compatibility.
70

71
```typescript { .api }
72
/**
73
 * @deprecated Use popupMotion instead
74
 */
75
interface TriggerProps {
76
  /** @deprecated CSS transition name for popup */
77
  popupTransitionName?: TransitionNameType;
78
  
79
  /** @deprecated CSS animation name for popup */
80
  popupAnimation?: AnimationType;
81
  
82
  /** @deprecated CSS transition name for mask */
83
  maskTransitionName?: TransitionNameType;
84
  
85
  /** @deprecated CSS animation name for mask */
86
  maskAnimation?: string;
87
}
88

89
type TransitionNameType = string;
90
type AnimationType = string;
91
```
92

93
**Usage Examples:**
94

95
```typescript
96
import React from "react";
97
import Trigger from "rc-trigger";
98

99
// Basic fade animation
100
function FadeAnimation() {
101
  return (
102
    <Trigger
103
      action={['click']}
104
      popup={<div>Fade in/out popup</div>}
105
      popupMotion={{
106
        motionName: 'fade',
107
        motionAppear: false,
108
        motionEnter: true,
109
        motionLeave: true
110
      }}
111
    >
112
      <button>Click for fade</button>
113
    </Trigger>
114
  );
115
}
116

117
// Slide down animation
118
function SlideAnimation() {
119
  return (
120
    <Trigger
121
      action={['click']}
122
      popup={<div>Slide down popup</div>}
123
      popupMotion={{
124
        motionName: {
125
          enter: 'slide-up-enter',
126
          enterActive: 'slide-up-enter-active',
127
          leave: 'slide-up-leave',
128
          leaveActive: 'slide-up-leave-active'
129
        }
130
      }}
131
    >
132
      <button>Click for slide</button>
133
    </Trigger>
134
  );
135
}
136

137
// Animation with mask
138
function AnimationWithMask() {
139
  return (
140
    <Trigger
141
      action={['click']}
142
      popup={<div>Animated popup with mask</div>}
143
      mask={true}
144
      popupMotion={{
145
        motionName: 'zoom',
146
        removeOnLeave: true
147
      }}
148
      maskMotion={{
149
        motionName: 'fade'
150
      }}
151
    >
152
      <button>Click for modal</button>
153
    </Trigger>
154
  );
155
}
156

157
// Animation callbacks
158
function AnimationCallbacks() {
159
  return (
160
    <Trigger
161
      action={['click']}
162
      popup={<div>Popup with callbacks</div>}
163
      popupMotion={{
164
        motionName: 'bounce',
165
        onEnterStart: (element) => {
166
          console.log('Animation starting:', element);
167
        },
168
        onEnterEnd: (element) => {
169
          console.log('Animation completed:', element);
170
        },
171
        onLeaveStart: (element) => {
172
          console.log('Exit animation starting:', element);
173
        }
174
      }}
175
    >
176
      <button>Click for bounce</button>
177
    </Trigger>
178
  );
179
}
180

181
// Legacy animation (deprecated)
182
function LegacyAnimation() {
183
  return (
184
    <Trigger
185
      action={['click']}
186
      popup={<div>Legacy animation</div>}
187
      popupTransitionName="rc-trigger-popup-slide-up"
188
      maskTransitionName="rc-trigger-mask-fade"
189
    >
190
      <button>Legacy animation</button>
191
    </Trigger>
192
  );
193
}
194
```
195

196
## CSS Animation Examples
197

198
### Fade Animation
199
```css
200
.fade-enter {
201
  opacity: 0;
202
}
203

204
.fade-enter-active {
205
  opacity: 1;
206
  transition: opacity 0.3s ease;
207
}
208

209
.fade-leave {
210
  opacity: 1;
211
}
212

213
.fade-leave-active {
214
  opacity: 0;
215
  transition: opacity 0.3s ease;
216
}
217
```
218

219
### Slide Up Animation
220
```css
221
.slide-up-enter {
222
  opacity: 0;
223
  transform: translateY(10px);
224
}
225

226
.slide-up-enter-active {
227
  opacity: 1;
228
  transform: translateY(0);
229
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
230
}
231

232
.slide-up-leave {
233
  opacity: 1;
234
  transform: translateY(0);
235
}
236

237
.slide-up-leave-active {
238
  opacity: 0;
239
  transform: translateY(-10px);
240
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
241
}
242
```
243

244
### Zoom Animation
245
```css
246
.zoom-enter {
247
  opacity: 0;
248
  transform: scale(0.8);
249
}
250

251
.zoom-enter-active {
252
  opacity: 1;
253
  transform: scale(1);
254
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
255
}
256

257
.zoom-leave {
258
  opacity: 1;
259
  transform: scale(1);
260
}
261

262
.zoom-leave-active {
263
  opacity: 0;
264
  transform: scale(0.8);
265
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
266
}
267
```
268

269
### Bounce Animation
270
```css
271
.bounce-enter {
272
  opacity: 0;
273
  transform: scale(0.3);
274
}
275

276
.bounce-enter-active {
277
  opacity: 1;
278
  transform: scale(1);
279
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
280
}
281

282
.bounce-leave {
283
  opacity: 1;
284
  transform: scale(1);
285
}
286

287
.bounce-leave-active {
288
  opacity: 0;
289
  transform: scale(0.3);
290
  transition: all 0.3s ease-out;
291
}
292
```
293

294
## Animation Best Practices
295

296
### Performance Considerations
297
- Use `transform` and `opacity` for smooth 60fps animations
298
- Avoid animating layout properties like `width`, `height`, `margin`
299
- Set `useCssTransform: true` in alignment for better performance
300
- Use `removeOnLeave: true` to clean up DOM after animations
301

302
### Motion Design
303
- Keep enter animations slightly longer than leave animations
304
- Use easing functions that feel natural (cubic-bezier)
305
- Consider the popup's purpose when choosing animation style
306
- Test animations on slower devices
307

308
### Accessibility
309
- Respect user's `prefers-reduced-motion` preference
310
- Provide fallback styles without animation
311
- Keep animation duration reasonable (150-400ms)
312
- Ensure content remains accessible during animations