0
# CSS Transitions
1

2
The CSSTransition component applies CSS classes during transition phases, making it easy to create CSS-based animations. It builds upon the base Transition component and automatically manages class name application.
3

4
## Capabilities
5

6
### CSSTransition Component
7

8
Applies CSS classes during appear, enter, and exit states of transitions with automatic class management.
9

10
```javascript { .api }
11
/**
12
 * CSS class-based transition component that applies classes for animation states
13
 * @param props - CSSTransition props extending Transition props
14
 * @returns JSX element with CSS class management
15
 */
16
function CSSTransition({
17
  classNames,
18
  onEnter,
19
  onEntering,
20
  onEntered,
21
  onExit,
22
  onExiting,
23
  onExited,
24
  ...transitionProps
25
}): JSX.Element;
26

27
interface CSSTransitionProps extends TransitionProps {
28
  /** 
29
   * CSS class names for different transition states
30
   * Can be a string prefix or object with specific class names
31
   */
32
  classNames: string | {
33
    appear?: string;
34
    appearActive?: string;
35
    appearDone?: string;
36
    enter?: string;
37
    enterActive?: string;
38
    enterDone?: string;
39
    exit?: string;
40
    exitActive?: string;
41
    exitDone?: string;
42
  };
43
  /** Enhanced callbacks that work with CSS class application (node is undefined when nodeRef is used) */
44
  onEnter?: (node?: HTMLElement, isAppearing?: boolean) => void;
45
  onEntering?: (node?: HTMLElement, isAppearing?: boolean) => void;
46
  onEntered?: (node?: HTMLElement, isAppearing?: boolean) => void;
47
  onExit?: (node?: HTMLElement) => void;
48
  onExiting?: (node?: HTMLElement) => void;
49
  onExited?: (node?: HTMLElement) => void;
50
}
51
```
52

53
**Usage Examples:**
54

55
```javascript
56
import React, { useState } from 'react';
57
import { CSSTransition } from 'react-transition-group';
58
import './fade.css'; // CSS file with transition styles
59

60
function App() {
61
  const [inProp, setInProp] = useState(false);
62
  
63
  return (
64
    <div>
65
      <CSSTransition in={inProp} timeout={200} classNames="fade">
66
        <div>
67
          {"I'll receive fade-* classes"}
68
        </div>
69
      </CSSTransition>
70
      <button onClick={() => setInProp(!inProp)}>
71
        Toggle
72
      </button>
73
    </div>
74
  );
75
}
76

77
// Object-based class names
78
function CustomClassNames() {
79
  const [show, setShow] = useState(false);
80
  
81
  return (
82
    <CSSTransition
83
      in={show}
84
      timeout={300}
85
      classNames={{
86
        enter: 'my-enter',
87
        enterActive: 'my-enter-active',
88
        exit: 'my-exit',
89
        exitActive: 'my-exit-active',
90
      }}
91
    >
92
      <div>Content with custom classes</div>
93
    </CSSTransition>
94
  );
95
}
96
```
97

98
### CSS Class Application Pattern
99

100
When using string-based `classNames`, CSS classes are applied in the following pattern:
101

102
**Enter Sequence:**
103
1. `fade-enter` is applied
104
2. `fade-enter-active` is added on next frame
105
3. Both classes removed, `fade-enter-done` added when complete
106

107
**Exit Sequence:**
108
1. `fade-exit` is applied
109
2. `fade-exit-active` is added on next frame  
110
3. Both classes removed, `fade-exit-done` added when complete
111

112
**Appear Sequence (if `appear={true}`):**
113
1. `fade-appear` is applied
114
2. `fade-appear-active` is added on next frame
115
3. Both classes removed, `fade-appear-done` and `fade-enter-done` added when complete
116

117
### Example CSS Styles
118

119
```css
120
/* Fade transition example */
121
.fade-enter {
122
  opacity: 0;
123
}
124

125
.fade-enter-active {
126
  opacity: 1;
127
  transition: opacity 200ms ease-in-out;
128
}
129

130
.fade-exit {
131
  opacity: 1;
132
}
133

134
.fade-exit-active {
135
  opacity: 0;
136
  transition: opacity 200ms ease-in-out;
137
}
138

139
/* Slide transition example */
140
.slide-enter {
141
  transform: translateX(-100%);
142
}
143

144
.slide-enter-active {
145
  transform: translateX(0);
146
  transition: transform 300ms ease-out;
147
}
148

149
.slide-exit {
150
  transform: translateX(0);
151
}
152

153
.slide-exit-active {
154
  transform: translateX(100%);
155
  transition: transform 300ms ease-in;
156
}
157
```
158

159
### Object-Based Class Names
160

161
For more control, provide an object with specific class names:
162

163
```javascript
164
const classNames = {
165
  appear: 'my-appear',
166
  appearActive: 'my-active-appear',
167
  appearDone: 'my-done-appear',
168
  enter: 'my-enter',
169
  enterActive: 'my-active-enter',
170
  enterDone: 'my-done-enter',
171
  exit: 'my-exit',
172
  exitActive: 'my-active-exit',
173
  exitDone: 'my-done-exit',
174
};
175

176
function MyComponent({ show }) {
177
  return (
178
    <CSSTransition
179
      in={show}
180
      timeout={200}
181
      classNames={classNames}
182
    >
183
      <div>Animated content</div>
184
    </CSSTransition>
185
  );
186
}
187
```
188

189
### CSS Modules Integration
190

191
Use with CSS Modules by spreading the imported styles:
192

193
```javascript
194
import styles from './styles.module.css';
195

196
function ModularComponent({ show }) {
197
  return (
198
    <CSSTransition
199
      in={show}
200
      timeout={200}
201
      classNames={{ ...styles }}
202
    >
203
      <div>Content with CSS Modules</div>
204
    </CSSTransition>
205
  );
206
}
207
```
208

209
### Advanced CSS Integration
210

211
The CSSTransition component forces a reflow between applying base and active classes to ensure proper CSS transitions:
212

213
```javascript
214
// This timing is handled automatically:
215
// 1. Apply 'fade-enter' class
216
// 2. Force reflow (node.scrollTop)
217
// 3. Apply 'fade-enter-active' class
218
// 4. CSS transition plays between these states
219
```
220

221
This reflow mechanism is crucial for animating appearance when elements are mounted, as it ensures the browser recognizes the initial state before transitioning to the final state.