0
# Animation and Transitions
1

2
Animation system with configurable ink bar and tab pane transitions for smooth user experiences. RC Tabs integrates with rc-motion to provide fluid animations and visual feedback during tab interactions.
3

4
## Capabilities
5

6
### Animation Configuration
7

8
Comprehensive animation settings for different parts of the tabs interface.
9

10
```typescript { .api }
11
/**
12
 * Animation configuration object controlling various transition effects
13
 */
14
interface AnimatedConfig {
15
  /** Enable/disable ink bar animation (the moving underline indicator) */
16
  inkBar?: boolean;
17
  /** Enable/disable tab pane content transitions */
18
  tabPane?: boolean;
19
  /** Custom motion configuration for tab pane transitions */
20
  tabPaneMotion?: CSSMotionProps;
21
}
22

23
/**
24
 * Simple boolean animation control
25
 * - true: Enables both ink bar and tab pane animations with defaults
26
 * - false: Disables all animations
27
 */
28
type AnimatedSimple = boolean;
29

30
/**
31
 * Combined animation prop type
32
 */
33
type AnimatedProp = boolean | AnimatedConfig;
34
```
35

36
**Usage Examples:**
37

38
```typescript
39
import Tabs from "rc-tabs";
40

41
// Disable all animations
42
function NoAnimationTabs() {
43
  return (
44
    <Tabs
45
      animated={false}
46
      items={tabItems}
47
    />
48
  );
49
}
50

51
// Enable all animations with defaults
52
function AnimatedTabs() {
53
  return (
54
    <Tabs
55
      animated={true} // Both ink bar and tab pane animations
56
      items={tabItems}
57
    />
58
  );
59
}
60

61
// Custom animation configuration
62
function CustomAnimatedTabs() {
63
  return (
64
    <Tabs
65
      animated={{
66
        inkBar: true,  // Enable ink bar animation
67
        tabPane: false, // Disable tab pane animation
68
      }}
69
      items={tabItems}
70
    />
71
  );
72
}
73
```
74

75
### Ink Bar Animation
76

77
The ink bar is the visual indicator that shows which tab is currently active, typically appearing as an underline or highlight.
78

79
```typescript { .api }
80
/**
81
 * Ink bar animation configuration
82
 * Controls the animated indicator that follows the active tab
83
 */
84
interface InkBarConfig {
85
  /** Whether to animate the ink bar movement between tabs */
86
  inkBar?: boolean;
87
}
88
```
89

90
**Ink Bar Behavior:**
91
- **Top/Bottom Tabs**: Appears as an animated underline that slides horizontally
92
- **Left/Right Tabs**: Appears as an animated highlight that moves vertically  
93
- **Smooth Transitions**: Uses CSS transitions for fluid movement between tabs
94
- **Responsive**: Automatically adjusts size and position based on tab dimensions
95

96
```typescript
97
// Tabs with animated ink bar only
98
function InkBarOnlyTabs() {
99
  return (
100
    <Tabs
101
      animated={{ 
102
        inkBar: true,   // Smooth ink bar transitions
103
        tabPane: false, // No content animation
104
      }}
105
      tabPosition="top"
106
      items={[
107
        { key: '1', label: 'Short', children: <div>Content 1</div> },
108
        { key: '2', label: 'Much Longer Tab', children: <div>Content 2</div> },
109
        { key: '3', label: 'Medium', children: <div>Content 3</div> },
110
      ]}
111
    />
112
  );
113
}
114
```
115

116
### Tab Pane Transitions
117

118
Content area animations that occur when switching between tabs.
119

120
```typescript { .api }
121
/**
122
 * Tab pane animation configuration
123
 * Controls transitions for tab content areas
124
 */
125
interface TabPaneConfig {
126
  /** Whether to animate tab pane content changes */
127
  tabPane?: boolean;
128
  /** Custom motion configuration for advanced transitions */
129
  tabPaneMotion?: CSSMotionProps;
130
}
131

132
/**
133
 * CSS Motion properties from rc-motion library
134
 * Provides advanced animation control for tab pane transitions
135
 */
136
interface CSSMotionProps {
137
  /** CSS transition or animation name */
138
  motionName?: string;
139
  /** Animation appear behavior when component first mounts */
140
  motionAppear?: boolean;  
141
  /** Animation enter behavior when becoming visible */
142
  motionEnter?: boolean;
143
  /** Animation leave behavior when becoming hidden */
144
  motionLeave?: boolean;
145
  /** Duration for appear animation */
146
  motionAppearDuration?: number;
147
  /** Duration for enter animation */
148
  motionEnterDuration?: number;
149
  /** Duration for leave animation */
150
  motionLeaveDuration?: number;
151
  /** Custom motion event handlers */
152
  onAppearStart?: (node: HTMLElement, done: () => void) => CSSMotionEvent;
153
  onEnterStart?: (node: HTMLElement, done: () => void) => CSSMotionEvent;
154
  onLeaveStart?: (node: HTMLElement, done: () => void) => CSSMotionEvent;
155
  onAppearActive?: (node: HTMLElement, done: () => void) => CSSMotionEvent;
156
  onEnterActive?: (node: HTMLElement, done: () => void) => CSSMotionEvent;
157
  onLeaveActive?: (node: HTMLElement, done: () => void) => CSSMotionEvent;
158
  onAppearEnd?: (node: HTMLElement, done: () => void) => boolean | void;
159
  onEnterEnd?: (node: HTMLElement, done: () => void) => boolean | void;
160
  onLeaveEnd?: (node: HTMLElement, done: () => void) => boolean | void;
161
}
162

163
/**
164
 * CSS Motion event object
165
 */
166
interface CSSMotionEvent {
167
  deadline?: boolean;
168
  target?: HTMLElement;
169
}
170
```
171

172
**Usage Examples:**
173

174
```typescript
175
// Default tab pane animations
176
function DefaultPaneAnimation() {
177
  return (
178
    <Tabs
179
      animated={{
180
        inkBar: true,
181
        tabPane: true, // Uses default fade transition
182
      }}
183
      items={tabItems}
184
    />
185
  );
186
}
187

188
// Custom tab pane motion
189
function CustomPaneMotion() {
190
  return (
191
    <Tabs
192
      animated={{
193
        inkBar: true,
194
        tabPane: true,
195
        tabPaneMotion: {
196
          motionName: 'slide', // Custom CSS class prefix
197
          motionAppear: false,
198
          motionEnter: true,
199
          motionLeave: false,
200
        },
201
      }}
202
      items={tabItems}
203
    />
204
  );
205
}
206

207
// No content animation, only ink bar
208
function InkBarOnly() {
209
  return (
210
    <Tabs
211
      animated={{
212
        inkBar: true,
213
        tabPane: false, // Instant content switching
214
      }}
215
      items={tabItems}
216
    />
217
  );
218
}
219
```
220

221
### Position-Based Animation
222

223
Different animation behaviors based on tab positioning.
224

225
```typescript { .api }
226
/**
227
 * Animation behavior varies by tab position
228
 * - top/bottom: Horizontal ink bar movement, vertical content transitions
229
 * - left/right: Vertical ink bar movement, horizontal content transitions  
230
 */
231
type PositionAnimationBehavior = {
232
  'top': 'horizontal-ink-bar',
233
  'bottom': 'horizontal-ink-bar', 
234
  'left': 'vertical-ink-bar',
235
  'right': 'vertical-ink-bar',
236
};
237
```
238

239
```typescript
240
// Vertical tabs with appropriate animations
241
function VerticalAnimatedTabs() {
242
  return (
243
    <Tabs
244
      tabPosition="left"
245
      animated={true} // Ink bar moves vertically
246
      items={[
247
        { key: '1', label: 'First', children: <div>First content</div> },
248
        { key: '2', label: 'Second', children: <div>Second content</div> },
249
        { key: '3', label: 'Third', children: <div>Third content</div> },
250
      ]}
251
    />
252
  );
253
}
254

255
// Bottom positioned tabs
256
function BottomAnimatedTabs() {
257
  return (
258
    <Tabs
259
      tabPosition="bottom"
260
      animated={{
261
        inkBar: true, // Horizontal movement above content
262
        tabPane: true,
263
      }}
264
      items={tabItems}
265
    />
266
  );
267
}
268
```
269

270
### Performance Considerations
271

272
Animation settings that affect performance and user experience.
273

274
```typescript { .api }
275
/**
276
 * Performance optimization strategies for animations
277
 */
278
interface AnimationPerformance {
279
  /** Disable animations on low-end devices */
280
  respectMotionPreferences?: boolean;
281
  /** Reduce animation complexity for many tabs */
282
  optimizeForTabCount?: boolean;
283
  /** CSS-only animations vs JavaScript-driven */
284
  useCSSSTransitions?: boolean;
285
}
286
```
287

288
**Performance Best Practices:**
289

290
```typescript
291
// Optimized for performance
292
function PerformantAnimatedTabs() {
293
  const [isLowEndDevice, setIsLowEndDevice] = useState(false);
294
  
295
  useEffect(() => {
296
    // Detect low-end devices or user preferences
297
    setIsLowEndDevice(
298
      navigator.hardwareConcurrency < 4 || 
299
      window.matchMedia('(prefers-reduced-motion: reduce)').matches
300
    );
301
  }, []);
302
  
303
  return (
304
    <Tabs
305
      animated={isLowEndDevice ? false : true}
306
      items={tabItems}
307
    />
308
  );
309
}
310

311
// Selective animation for large tab sets
312
function ManyTabsAnimation({ tabCount }: { tabCount: number }) {
313
  return (
314
    <Tabs
315
      animated={{
316
        inkBar: true, // Keep ink bar for visual feedback
317
        tabPane: tabCount < 10, // Disable content animation for many tabs
318
      }}
319
      items={generateManyTabs(tabCount)}
320
    />
321
  );
322
}
323
```
324

325
### CSS Animation Classes
326

327
RC Tabs generates CSS classes that can be styled for custom animations.
328

329
```typescript { .api }
330
/**
331
 * Generated CSS classes for animation styling
332
 * Prefix customizable via prefixCls prop (default: 'rc-tabs')
333
 */
334
interface AnimationClasses {
335
  /** Ink bar animation classes */
336
  inkBar: '.rc-tabs-ink-bar';
337
  /** Tab pane motion classes */
338
  tabPane: '.rc-tabs-content-animated';
339
  /** Individual tab transitions */
340
  tab: '.rc-tabs-tab';
341
}
342
```
343

344
**Custom CSS Animation Example:**
345

346
```css
347
/* Custom ink bar animation */
348
.custom-tabs .rc-tabs-ink-bar {
349
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
350
  background: linear-gradient(90deg, #1890ff, #722ed1);
351
  height: 3px;
352
}
353

354
/* Custom tab pane transitions */
355
.custom-tabs .rc-tabs-content-animated .rc-tabs-tabpane {
356
  transition: opacity 0.2s ease-in-out;
357
}
358

359
.custom-tabs .rc-tabs-content-animated .rc-tabs-tabpane-inactive {
360
  opacity: 0;
361
  pointer-events: none;
362
}
363

364
.custom-tabs .rc-tabs-content-animated .rc-tabs-tabpane-active {
365
  opacity: 1;
366
}
367
```
368

369
```typescript
370
// Using custom animation styles
371
function CustomStyledTabs() {
372
  return (
373
    <Tabs
374
      className="custom-tabs"
375
      animated={true}
376
      items={tabItems}
377
    />
378
  );
379
}
380
```