0
# Base Transition
1

2
The Transition component is the platform-agnostic base component for managing component states over time. It provides the core state machine that all other transition components build upon.
3

4
## Capabilities
5

6
### Transition Component
7

8
The main Transition component that tracks transition states and manages lifecycle callbacks.
9

10
```javascript { .api }
11
/**
12
 * Platform-agnostic transition component for managing component states over time
13
 * @param props - Transition props
14
 * @returns JSX element with transition state management
15
 */
16
function Transition({
17
  nodeRef,
18
  children,
19
  in: inProp,
20
  mountOnEnter,
21
  unmountOnExit,
22
  appear,
23
  enter,
24
  exit,
25
  timeout,
26
  addEndListener,
27
  onEnter,
28
  onEntering,
29
  onEntered,
30
  onExit,
31
  onExiting,
32
  onExited,
33
  ...otherProps
34
}): JSX.Element;
35

36
interface TransitionProps {
37
  /** React reference to DOM element that needs to transition */
38
  nodeRef?: React.RefObject<HTMLElement>;
39
  /** Function child or React element to render */
40
  children: ((state: string, props: any) => React.ReactNode) | React.ReactElement;
41
  /** Show the component; triggers enter or exit states */
42
  in?: boolean;
43
  /** Lazy mount component on first in={true} */
44
  mountOnEnter?: boolean;
45
  /** Unmount component after it finishes exiting */
46
  unmountOnExit?: boolean;
47
  /** Perform enter transition when first mounting */
48
  appear?: boolean;
49
  /** Enable or disable enter transitions */
50
  enter?: boolean;
51
  /** Enable or disable exit transitions */
52
  exit?: boolean;
53
  /** Duration of transition in milliseconds or timeout object (required unless addEndListener provided) */
54
  timeout?: number | {
55
    appear?: number;
56
    enter?: number;
57
    exit?: number;
58
  };
59
  /** Custom transition end trigger callback (alternative to timeout) */
60
  addEndListener?: (node: HTMLElement, done: () => void) => void;
61
  /** Callback fired before "entering" status is applied (node is undefined when nodeRef is used) */
62
  onEnter?: (node?: HTMLElement, isAppearing?: boolean) => void;
63
  /** Callback fired after "entering" status is applied (node is undefined when nodeRef is used) */
64
  onEntering?: (node?: HTMLElement, isAppearing?: boolean) => void;
65
  /** Callback fired after "entered" status is applied (node is undefined when nodeRef is used) */
66
  onEntered?: (node?: HTMLElement, isAppearing?: boolean) => void;
67
  /** Callback fired before "exiting" status is applied (node is undefined when nodeRef is used) */
68
  onExit?: (node?: HTMLElement) => void;
69
  /** Callback fired after "exiting" status is applied (node is undefined when nodeRef is used) */
70
  onExiting?: (node?: HTMLElement) => void;
71
  /** Callback fired after "exited" status is applied (node is undefined when nodeRef is used) */
72
  onExited?: (node?: HTMLElement) => void;
73
}
74
```
75

76
**Note**: Either the `timeout` prop OR the `addEndListener` prop must be provided. The `timeout` prop defines how long to wait before firing transition events, while `addEndListener` allows you to manually trigger when the transition should end.
77

78
**Usage Examples:**
79

80
```javascript
81
import React, { useState } from 'react';
82
import { Transition } from 'react-transition-group';
83

84
const duration = 300;
85

86
const defaultStyle = {
87
  transition: `opacity ${duration}ms ease-in-out`,
88
  opacity: 0,
89
};
90

91
const transitionStyles = {
92
  entering: { opacity: 1 },
93
  entered: { opacity: 1 },
94
  exiting: { opacity: 0 },
95
  exited: { opacity: 0 },
96
};
97

98
function Fade({ in: inProp }) {
99
  return (
100
    <Transition in={inProp} timeout={duration}>
101
      {state => (
102
        <div style={{
103
          ...defaultStyle,
104
          ...transitionStyles[state]
105
        }}>
106
          I'm a fade Transition!
107
        </div>
108
      )}
109
    </Transition>
110
  );
111
}
112

113
// Usage with function children
114
function App() {
115
  const [inProp, setInProp] = useState(false);
116
  return (
117
    <div>
118
      <Transition in={inProp} timeout={500}>
119
        {state => (
120
          <div>I'm {state}</div>
121
        )}
122
      </Transition>
123
      <button onClick={() => setInProp(true)}>
124
        Click to Enter
125
      </button>
126
    </div>
127
  );
128
}
129
```
130

131
### Transition State Constants
132

133
Constants representing the different states of a transition.
134

135
```javascript { .api }
136
/** Component is not mounted */
137
const UNMOUNTED = 'unmounted';
138
/** Component has exited */
139
const EXITED = 'exited';
140
/** Component is entering */
141
const ENTERING = 'entering';
142
/** Component has entered */
143
const ENTERED = 'entered';
144
/** Component is exiting */
145
const EXITING = 'exiting';
146

147
// Access via Transition static properties
148
Transition.UNMOUNTED; // 'unmounted'
149
Transition.EXITED;    // 'exited'
150
Transition.ENTERING;  // 'entering'
151
Transition.ENTERED;   // 'entered'
152
Transition.EXITING;   // 'exiting'
153
```
154

155
## Transition Lifecycle
156

157
The Transition component follows a predictable state machine:
158

159
1. **EXITED/UNMOUNTED** → **ENTERING** (when `in` becomes `true`)
160
2. **ENTERING** → **ENTERED** (after timeout or addEndListener callback)
161
3. **ENTERED** → **EXITING** (when `in` becomes `false`)
162
4. **EXITING** → **EXITED** (after timeout or addEndListener callback)
163

164
If `unmountOnExit` is true, the component transitions to **UNMOUNTED** after **EXITED**.
165

166
## Node Reference Usage
167

168
When using `nodeRef`, the DOM node is not passed to callback functions since you have direct access:
169

170
```javascript
171
import React, { useRef } from 'react';
172
import { Transition } from 'react-transition-group';
173

174
function MyComponent() {
175
  const nodeRef = useRef(null);
176
  
177
  return (
178
    <Transition
179
      nodeRef={nodeRef}
180
      in={true}
181
      timeout={200}
182
      onEnter={() => {
183
        // nodeRef.current is available here
184
        console.log('Entering:', nodeRef.current);
185
      }}
186
    >
187
      <div ref={nodeRef}>
188
        Content with ref
189
      </div>
190
    </Transition>
191
  );
192
}
193
```