title: React transition group animate between components (fade in component in place of another)
body: <p>I'm using <code>react-transition-group</code> for animations in my app.</p>
  
  <p>I have a Popup where I want to animate between two contents. I want to make the first content fade out and the second content appear in its place.</p>
  
  <p>So far I have a problem where while animating the second content appears below the first one while the first one is still visible. (See the screenshot)</p>
  
  <p>Any help will be much appreciated.</p>
  
  <p><a href="https://i.stack.imgur.com/6tABG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6tABG.png" alt="enter image description here"></a></p>
  
  <p>My code</p>
  
  <pre><code>const [stage, setStage] = useState('register');
  
    function changeStage(stageVal) {
      setStage(stageVal);
    }
  ...
  &lt;Popup togglePopupWindow={togglePopupWindow} setStage={setStage}&gt;
          &lt;CSSTransitionGroup
            transitionName="example"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={300}
          &gt;
            {stage === 'register' &amp;&amp; (
            &lt;&gt;
              &lt;Form&gt;
                &lt;h2&gt;Register&lt;/h2&gt;
                &lt;Input type="text" placeholder="Login" /&gt;
                &lt;Input type="email" placeholder="Email" /&gt;
                &lt;Input type="password" placeholder="Password" /&gt;
                &lt;Button text="Register" /&gt;
              &lt;/Form&gt;
              &lt;p&gt;
                &lt;span&gt;Already registered?&lt;/span&gt;
                &lt;Button className="popup__login" text="Login" onClick={() =&gt; changeStage('login')} /&gt;
              &lt;/p&gt;
          &lt;/&gt;
            )
        }
            {stage === 'login' &amp;&amp; (
            &lt;Form&gt;
              &lt;h2&gt;Login&lt;/h2&gt;
              &lt;Input type="text" placeholder="Login" /&gt;
              &lt;Input type="password" placeholder="Password" /&gt;
              &lt;Button text="Register" /&gt;
            &lt;/Form&gt;
            )
     }
          &lt;/CSSTransitionGroup&gt;
        &lt;/Popup&gt;
  </code></pre>
  
  <p>Styles </p>
  
  <pre><code>.example-enter {
      opacity: 0;
      }
  
  .example-enter.example-enter-active {
     opacity: 1;
     transition: opacity 500ms ease-in-out;
  }
  
  .example-leave {
     opacity: 1;
  }
  
  .example-leave.example-leave-active {
     opacity: 0;
     transition: opacity 300ms ease-in-out;
  }
  </code></pre>