javascript - 使用 React 转换组为表格中的行进出动画

Question

目标

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

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

我现在在哪里

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

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

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

代码

通过行映射的表格道具

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

标签： javascriptreactjsreact-transition-group