使用React Transition Group对表中的行进行动画处理

Question

目标

我目前正在尝试使用React-Transition-Group来动画化表格的行内和外。可能发生两种不同的情况：

• 表的全部内容将被换出（最常见的选择）
• 可以添加和删除单个行

我现在在哪里

我以this todo list example作为制作表格动画的起点。 Here is my sandbox。

我的主要问题是当表数据被完全换出时，您可以同时看到两个数据集。旧数据正在滑出，而新数据正在滑入。这导致旧数据在过渡时会突然下降（请参见下图）。

理想情况下，初始表数据将在新数据进入之前完全消失，但是当旧数据在那里时，新数据会弹出。

代码

通过行映射的表道具

  <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
    });
  };