title: Wait for one React CSS animation to end before starting another
body: <p>I'm using React and the <a href="https://github.com/reactjs/react-transition-group" rel="nofollow noreferrer">CSSTransitionGroup</a> component to switch between two sets of <code>members</code> in my app's state. Its state contains the <code>members</code>, each of which has a flag to say whether they're a real member of not. It also contains a flag to keep track of which type of member we're viewing:</p>
  
  <pre><code>this.state = {
        viewMembers: true,
        members: [
          {
            id: 1,
            name: "Jim",
            isMember: true
          },
          {
            id: 2,
            name: "John",
            isMember: false
          }
      ]
  }
  </code></pre>
  
  <p>In my <code>render</code> function I map over this array, and only show members corresponding with the view state (i.e. if <code>viewMembers</code> is <code>true</code>, I only show members where <code>isMember</code> is <code>true</code>, and vice versa). For each member I return a table <code>&lt;tr&gt;</code>. The <code>map</code> function is wrapped in a <code>CSSTransitionGroup</code> tag to fade in the table rows. This all works fine - please see working code here: <a href="https://jsfiddle.net/d9cfh4zg/1/" rel="nofollow noreferrer">jsfiddle.net/d9cfh4zg/1/</a>.</p>
  
  <p>My issue is that it currently fades in the new state before fading out the old one, giving it a slightly janky quality. How can I allow existing rows to fade out before fading in the new ones?</p>