title: Reactjs animate replace: How to wait for fade out before adding content to fade in?
body: <p>I am trying to use <code>ReactCSSTransitionGroup</code> to replace content by fading out some content, waiting for it to disappear completely, and then fading in new content. </p>
  
  <p>I am using <code>key</code> props which was the solution to <a href="https://stackoverflow.com/q/21875208/1379290">this related question</a>, so the content is being swapped out and animated. The problem, though, is that the new content is added to the DOM and takes up space in the flow from the start, rather that waiting until the old content has faded out. i.e., I can delay fading in with a transition delay, but the gap where the content will fade in is there from the start. Since CSS <code>visibility:hidden</code> still adds space for the element in the flow using that with <code>opacity</code> doesn't help either. </p>
  
  <p><strong>My question:</strong> Is there a way to achieve the desired outcome using only CSS? If not, I presume my component will have to detect the end of the fade-out transition and only then add the new element; what is the recommended React way for detecting and reacting to <code>transitionend</code> events?</p>
  
  <p>My code thus far:</p>
  
  <pre><code>// jsx
  
  let key = this.state.adding ? 'addForm' : 'addPlaceholder';
  
  &lt;ReactCSSTransitionGroup transitionName="fade"&gt;
    &lt;div key={key}&gt;
      {this.state.adding ? this.renderForm() : this.renderPlaceholder()}
    &lt;/div&gt;
  &lt;/ReactCSSTransitionGroup&gt;
  
  
  // css
  
  .fade-enter {
    overflow: hidden;
    opacity: 0.01;
  }
  .fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity .3s ease-in .3s;
  }
  
  .fade-leave {
    opacity: 1;
  }
  .fade-leave.fade-leave-active {
    opacity: 0.01;
    transition: opacity .3s ease-in;
  }
  </code></pre>