Animating rows in/out of a table with React Transition Group

Question

Goal

I'm currently attempting to use React-Transition-Group to animate the rows of a table in and out. There are two different scenarios that can happen:

• the entire contents of the table will be swapped out (most common option)
• individual rows may be added and removed

Where I am now

I used this todo list example as a starting point to make the table animation. Here is my sandbox.

My main problem is when the table data is being completely swapped out, you can see both data sets at the same time. The old data is sliding out while the new data is sliding in. This causes the old data to snap down as it's transitioning out (see image below).

Ideally the initial table data would completely disappear before the new data comes in, but instead the new data pops in while the old data is there.

Code

Table Prop that maps through rows

  <table>
    <TransitionGroup component="tbody">
      {this.props.tables[this.props.currentTable].rows.map((row, i) => {
        return (
          <CSSTransition
            timeout={500}
            classNames="SlideIn"
            key={`${row}-${i}`}
          >
            <tr>
              {row.map((column, i) => {
                return <td>{column}</td>;
              })}
            </tr>
          </CSSTransition>
        );
      })}
    </TransitionGroup>
  </table>

Function to change table dataset:

  changeTable = () => {
    this.setState({
      currentTable:
        this.state.currentTable < this.state.tables.length - 1
          ? this.state.currentTable + 1
          : 0
    });
  };