function Transition(props, context) {
    var _this;

    _this = _React$Component.call(this, props, context) || this;
    var parentGroup = context.transitionGroup; // In the context of a TransitionGroup all enters are really appears

    var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
    var initialStatus;
    _this.appearStatus = null;

    if (props.in) {
      if (appear) {
        initialStatus = EXITED;
        _this.appearStatus = ENTERING;
      } else {
        initialStatus = ENTERED;
      }
    } else {
      if (props.unmountOnExit || props.mountOnEnter) {
        initialStatus = UNMOUNTED;
      } else {
        initialStatus = EXITED;
      }
    }

    _this.state = {
      status: initialStatus
    };
    _this.nextCallback = null;
    return _this;
  }
The Transition component lets you describe a transition from one component
state to another _over time_ with a simple declarative API. Most commonly
it's used to animate the mounting and unmounting of a component, but can also
be used to describe in-place transition states as well.

---

**Note**: `Transition` is a platform-agnostic base component. If you're using
transitions in CSS, you'll probably want to use
[`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)
instead. It inherits all the features of `Transition`, but contains
additional features necessary to play nice with CSS transitions (hence the
name of the component).

---

By default the `Transition` component does not alter the behavior of the
component it renders, it only tracks "enter" and "exit" states for the
components. It's up to you to give meaning and effect to those states. For
example we can add styles to a component when it enters or exits:

```jsx
import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
  entering: { opacity: 0 },
  entered:  { opacity: 1 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {state => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);
```

There are 4 main states a Transition can be in:
 - `'entering'`
 - `'entered'`
 - `'exiting'`
 - `'exited'`

Transition state is toggled via the `in` prop. When `true` the component
begins the "Enter" stage. During this stage, the component will shift from
its current transition state, to `'entering'` for the duration of the
transition and then to the `'entered'` stage once it's complete. Let's take
the following example (we'll use the
[useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):

```jsx
function App() {
  const [inProp, setInProp] = useState(false);
  return (
    <div>
      <Transition in={inProp} timeout={500}>
        {state => (
          // ...
        )}
      </Transition>
      <button onClick={() => setInProp(true)}>
        Click to Enter
      </button>
    </div>
  );
}
```

When the button is clicked the component will shift to the `'entering'` state
and stay there for 500ms (the value of `timeout`) before it finally switches
to `'entered'`.

When `in` is `false` the same thing happens except the state moves from
`'exiting'` to `'exited'`.