0
# Animation and Motion
1

2
RC-Collapse integrates with rc-motion to provide smooth expand and collapse animations. The animation system supports extensive customization through motion configuration props.
3

4
## Motion Configuration
5

6
```typescript { .api }
7
interface CSSMotionProps {
8
  motionName?: string;
9
  motionAppear?: boolean;
10
  motionEnter?: boolean;
11
  motionLeave?: boolean;
12
  motionLeaveImmediately?: boolean;
13
  motionDeadline?: number;
14
  removeOnLeave?: boolean;
15
  leavedClassName?: string;
16
  onAppearStart?: MotionEventHandler;
17
  onEnterStart?: MotionEventHandler;
18
  onLeaveStart?: MotionEventHandler;
19
  onAppearActive?: MotionEventHandler;
20
  onEnterActive?: MotionEventHandler;
21
  onLeaveActive?: MotionEventHandler;
22
  onAppearEnd?: MotionEventHandler;
23
  onEnterEnd?: MotionEventHandler;
24
  onLeaveEnd?: MotionEventHandler;
25
}
26

27
type MotionEventHandler = (
28
  element: HTMLElement,
29
  event?: React.TransitionEvent | React.AnimationEvent
30
) => React.CSSProperties | void;
31

32
interface MotionEvent {
33
  deadline?: boolean;
34
  target?: HTMLElement;
35
}
36
```
37

38
## Animation Properties
39

40
### Motion Control
41

42
- **`motionName`**: `string` - CSS class prefix for motion states
43
- **`motionAppear`**: `boolean` - Enable appear animation (default: true)
44
- **`motionEnter`**: `boolean` - Enable enter animation (default: true) 
45
- **`motionLeave`**: `boolean` - Enable leave animation (default: true)
46
- **`motionLeaveImmediately`**: `boolean` - Start leave animation immediately
47
- **`motionDeadline`**: `number` - Maximum animation duration in milliseconds
48
- **`removeOnLeave`**: `boolean` - Remove element from DOM after leave animation
49

50
### CSS Classes
51

52
- **`leavedClassName`**: `string` - CSS class applied to hidden panels (default: 'rc-collapse-content-hidden')
53

54
### Event Handlers
55

56
Animation lifecycle event handlers that allow custom animation control:
57

58
- **`onAppearStart`**: Fired when appear animation starts
59
- **`onEnterStart`**: Fired when enter animation starts  
60
- **`onLeaveStart`**: Fired when leave animation starts
61
- **`onAppearActive`**: Fired during appear animation
62
- **`onEnterActive`**: Fired during enter animation
63
- **`onLeaveActive`**: Fired during leave animation
64
- **`onAppearEnd`**: Fired when appear animation ends
65
- **`onEnterEnd`**: Fired when enter animation ends
66
- **`onLeaveEnd`**: Fired when leave animation ends
67

68
## Usage Examples
69

70
### Basic Animation Setup
71

72
```typescript
73
import Collapse from "rc-collapse";
74

75
const BasicAnimation = () => {
76
  const openMotion = {
77
    motionName: 'rc-collapse-motion',
78
    motionAppear: false,
79
    motionEnter: true,
80
    motionLeave: true,
81
  };
82

83
  const items = [
84
    { key: '1', label: 'Animated Panel', children: 'Content with animation' },
85
  ];
86

87
  return <Collapse openMotion={openMotion} items={items} />;
88
};
89
```
90

91
### Custom Animation Duration
92

93
```typescript
94
import Collapse from "rc-collapse";
95

96
const CustomDuration = () => {
97
  const openMotion = {
98
    motionName: 'custom-collapse',
99
    motionDeadline: 300, // 300ms max duration
100
    onEnterStart: (element) => {
101
      element.style.transition = 'height 0.3s ease-out';
102
      return { height: 0 };
103
    },
104
    onEnterActive: (element) => {
105
      return { height: element.scrollHeight };
106
    },
107
    onLeaveStart: (element) => {
108
      return { height: element.scrollHeight };
109
    },
110
    onLeaveActive: () => {
111
      return { height: 0 };
112
    },
113
  };
114

115
  const items = [
116
    { key: '1', label: 'Custom Duration Panel', children: 'Animated content' },
117
  ];
118

119
  return <Collapse openMotion={openMotion} items={items} />;
120
};
121
```
122

123
### Smooth Height Animation
124

125
```typescript
126
import Collapse from "rc-collapse";
127

128
const SmoothHeightAnimation = () => {
129
  const smoothMotion = {
130
    motionName: 'smooth-collapse',
131
    onEnterStart: (element: HTMLElement) => {
132
      element.style.height = '0px';
133
      element.style.opacity = '0';
134
      return {
135
        height: 0,
136
        opacity: 0,
137
      };
138
    },
139
    onEnterActive: (element: HTMLElement) => {
140
      element.style.transition = 'height 0.2s ease, opacity 0.2s ease';
141
      return {
142
        height: `${element.scrollHeight}px`,
143
        opacity: 1,
144
      };
145
    },
146
    onLeaveStart: (element: HTMLElement) => {
147
      return {
148
        height: `${element.scrollHeight}px`,
149
        opacity: 1,
150
      };
151
    },
152
    onLeaveActive: () => {
153
      return {
154
        height: 0,
155
        opacity: 0,
156
      };
157
    },
158
  };
159

160
  const items = [
161
    { key: '1', label: 'Smooth Animation', children: 'Smoothly animated content' },
162
  ];
163

164
  return <Collapse openMotion={smoothMotion} items={items} />;
165
};
166
```
167

168
### No Animation (Instant Toggle)
169

170
```typescript
171
import Collapse from "rc-collapse";
172

173
const NoAnimation = () => {
174
  const noMotion = {
175
    motionName: '',
176
    motionAppear: false,
177
    motionEnter: false,
178
    motionLeave: false,
179
  };
180

181
  const items = [
182
    { key: '1', label: 'Instant Toggle', children: 'No animation content' },
183
  ];
184

185
  return <Collapse openMotion={noMotion} items={items} />;
186
};
187
```
188

189
### Advanced Animation with Callbacks
190

191
```typescript
192
import Collapse from "rc-collapse";
193

194
const AdvancedAnimation = () => {
195
  const advancedMotion = {
196
    motionName: 'advanced-collapse',
197
    motionDeadline: 500,
198
    onEnterStart: (element: HTMLElement) => {
199
      console.log('Panel opening started');
200
      element.style.transformOrigin = 'top';
201
      return {
202
        transform: 'scaleY(0)',
203
        opacity: 0,
204
      };
205
    },
206
    onEnterActive: (element: HTMLElement) => {
207
      element.style.transition = 'transform 0.3s ease, opacity 0.3s ease';
208
      return {
209
        transform: 'scaleY(1)',
210
        opacity: 1,
211
      };
212
    },
213
    onEnterEnd: () => {
214
      console.log('Panel opening completed');
215
    },
216
    onLeaveStart: (element: HTMLElement) => {
217
      console.log('Panel closing started');
218
      return {
219
        transform: 'scaleY(1)',
220
        opacity: 1,
221
      };
222
    },
223
    onLeaveActive: () => {
224
      return {
225
        transform: 'scaleY(0)',
226
        opacity: 0,
227
      };
228
    },
229
    onLeaveEnd: () => {
230
      console.log('Panel closing completed');
231
    },
232
  };
233

234
  const items = [
235
    { key: '1', label: 'Advanced Animation', children: 'Advanced animated content' },
236
  ];
237

238
  return <Collapse openMotion={advancedMotion} items={items} />;
239
};
240
```
241

242
## CSS Classes and Styling
243

244
### Default Motion Classes
245

246
RC-Collapse applies the following CSS classes during animations:
247

248
```css
249
/* Panel content container */
250
.rc-collapse-content {
251
  overflow: hidden;
252
}
253

254
/* Hidden panel state */
255
.rc-collapse-content-hidden {
256
  display: none;
257
}
258

259
/* Active panel state */
260
.rc-collapse-content-active {
261
  /* Panel is visible and expanded */
262
}
263

264
/* Inactive panel state */  
265
.rc-collapse-content-inactive {
266
  /* Panel is hidden or collapsed */
267
}
268
```
269

270
### Custom Motion CSS
271

272
```css
273
/* Custom animation example */
274
.custom-collapse-motion-enter {
275
  opacity: 0;
276
  transform: translateY(-10px);
277
}
278

279
.custom-collapse-motion-enter-active {
280
  opacity: 1;
281
  transform: translateY(0);
282
  transition: opacity 0.2s, transform 0.2s;
283
}
284

285
.custom-collapse-motion-leave {
286
  opacity: 1;
287
  transform: translateY(0);
288
}
289

290
.custom-collapse-motion-leave-active {
291
  opacity: 0;
292
  transform: translateY(-10px);
293
  transition: opacity 0.2s, transform 0.2s;
294
}
295
```
296

297
## Performance Considerations
298

299
### Animation Performance Tips
300

301
- Use `transform` and `opacity` properties for better performance
302
- Avoid animating `height` directly when possible
303
- Consider using `will-change` CSS property for smooth animations
304
- Use `motionDeadline` to prevent long-running animations
305

306
### Memory Management
307

308
```typescript
309
const optimizedMotion = {
310
  motionName: 'optimized-collapse',
311
  removeOnLeave: true, // Remove from DOM after animation
312
  motionDeadline: 300, // Limit animation duration
313
};
314
```
315

316
## Accessibility and Animation
317

318
### Respecting User Preferences
319

320
```typescript
321
import Collapse from "rc-collapse";
322

323
const AccessibleAnimation = () => {
324
  // Respect user's motion preferences
325
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
326
  
327
  const respectfulMotion = prefersReducedMotion 
328
    ? {
329
        motionName: '',
330
        motionEnter: false,
331
        motionLeave: false,
332
      }
333
    : {
334
        motionName: 'smooth-collapse',
335
        motionEnter: true,
336
        motionLeave: true,
337
      };
338

339
  const items = [
340
    { key: '1', label: 'Accessible Panel', children: 'Respects motion preferences' },
341
  ];
342

343
  return <Collapse openMotion={respectfulMotion} items={items} />;
344
};
345
```
346

347
### Animation and Screen Readers
348

349
The animation system is designed to work with screen readers:
350

351
- Content visibility changes are announced properly
352
- ARIA states are updated before animations start
353
- Focus management is maintained during animations