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

Question

目标

我目前正在尝试使用React-Transition-Group对表的行进出进行动画处理。可能会发生两种不同的情况：

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

我现在在哪里

我使用此待办事项列表示例作为制作表格动画的起点。这是我的沙箱。

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

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

代码

通过行映射的 Table 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
    });
  };