title: React Transition Group Transition Enter Animation Doesn't Work with unmountOnExit?
body: <p>I created a transition with <code>react-transition-group</code> and added <code>unmountOnExit</code>, which causes the enter animation not to work. When removing <code>unmountOnExit</code>, the enter animation works.</p>
  <p>Here is a <a href="https://codesandbox.io/s/admiring-fog-lhroc?file=/FadeScaleAlert.js" rel="nofollow noreferrer">CodeSandbox demo</a></p>
  <p>I opened an issue on <a href="https://github.com/reactjs/react-transition-group/issues/745" rel="nofollow noreferrer">GitHub</a> but I was wondering if there was anything wrong with my code.</p>
  <pre class="lang-js prettyprint-override"><code>const duration = 300;
  
  const defaultStyle = {
    transition: `opacity ${duration}ms ease-in-out, transform ${duration}ms ease-in-out`,
    opacity: 0,
    transform: 'scale(.1)',
  };
  
  const transitionStyles = {
    entering: { opacity: 1, transform: 'none' },
    entered: { opacity: 1, transform: 'none' },
    exiting: { opacity: 0, transform: 'scale(.1)' },
    exited: { opacity: 0, transform: 'scale(.1)' },
  };
  
  const FadeScaleAlert = ({ in: inProp }) =&gt; (
    &lt;Transition in={inProp} timeout={duration} unmountOnExit&gt;
      {(state) =&gt; (
        &lt;Alert
          variant=&quot;primary&quot;
          style={{
            ...defaultStyle,
            ...transitionStyles[state],
          }}
        &gt;
          &lt;Alert.Heading&gt;
            Animated alert message
          &lt;/Alert.Heading&gt;
          &lt;p&gt;
            This alert message is being transitioned in and
            out of the DOM.
          &lt;/p&gt;
        &lt;/Alert&gt;
      )}
    &lt;/Transition&gt;
  );
  </code></pre>