Анимация строк в / из таблицы с помощью React Transition Group

Question

Цель

В настоящее время я пытаюсь использовать React-Transition-Group для анимации строк таблицы. Возможны два разных сценария:

• все содержимое таблицы будет выгружено (наиболее распространенный вариант)
• отдельные строки могут быть добавлены и удалены

Где я сейчас

Я использовал этот пример списка задач в качестве отправной точки для создания анимации таблицы. Вот моя песочница.

Моя главная проблема заключается в том, что когда данные таблицы полностью выгружаются, вы можете видеть оба набора данных одновременно. Старые данные выдвигаются, в то время как новые данные выдвигаются. Это приводит к тому, что старые данные срабатывают по мере их перехода (см. Изображение ниже).

В идеале, исходные данные таблицы должны полностью исчезнуть до того, как поступят новые данные, но вместо этого новые данные появляются, когда старые данные находятся там.

Код

Таблица Prop, отображающая строки

  <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>

Функция для изменения набора данных таблицы:

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