title: React Transition Group slide elements up
body: <p>My current version is hiding each row, but it happens too quickly, as you can see  <a href="https://codepen.io/no1melman/pen/XaJXdo?editors=0110" rel="nofollow noreferrer">here in my codepen</a>. Repro by <strong><em>deleting</em></strong> the top element.</p>
  
  <p>I would prefer if you the events unfolded like this:</p>
  
  <ol>
  <li>Fade out</li>
  <li>Slide up</li>
  </ol>
  
  <p>I'm unsure how to do this using CSS transitions and the ReactTransitionGroup</p>
  
  <p>If I can get to the stage that you see the element disappearing, then everything bunching up that would be a great start!!</p>
  
  <p>My transition stuff:</p>
  
  <pre><code>const CustomerList = ({ onDelete, customers }) =&gt; {
    return (
      &lt;div class="customer-list"&gt;
        &lt;TransitionGroup&gt;
          {customers.map((c, i) =&gt; 
            &lt;CSSTransition
              key={i}
              classNames="customer"
              timeout={{ enter: 500, exit: 1200 }}
            &gt;        
              &lt;CustomerRow
                customer={c}
                onDelete={() =&gt; onDelete(i, c)}
              /&gt;
            &lt;/CSSTransition&gt;
          )}  
        &lt;/TransitionGroup&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.customer-enter {
    opacity: 0.01;
  }
  
  .customer-enter.customer-enter-active {
    opacity: 1;
    transition: 500ms;
  }
  
  .customer-exit {
    opacity: 1;
  }
  
  .customer-exit.customer-exit-active {
    opacity: 0.01;
    transition: 1200ms;
  }
  </code></pre>
  
  <h3>Update</h3>
  
  <p>I've figured out with css you can have two transitions happening in sequence something <a href="https://codepen.io/no1melman/pen/OjPpEx" rel="nofollow noreferrer">like this</a></p>
  
  <pre><code>.something {
  
    width: 200px;
    height: 100px;
    background-color: black;
  
    transition: background-color 200ms ease, height 200ms ease 200ms;
  
  }
  
  .something:hover {
    height: 0px;
    background-color: blue;
  }
  </code></pre>
  
  <p>So it is just a case of the <code>&lt;CSSTransition timeout={} /&gt;</code> actually waiting for it...</p>
  
  <h1>React Update</h1>
  
  <p>I have the "effect" working.... <a href="https://codepen.io/no1melman/pen/JyoWgX?editors=0110" rel="nofollow noreferrer">see codepen</a></p>
  
  <p>But, obviously here, the elements still remain, which isn't the right functional behaviour</p>