Анимация строк в / из таблицы с помощью 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
    });
  };