javascript - 如何使用react-flip-move为表格制作动画

Question

我在使用react-flip-move 时遇到了动画问题。

如果我对列表进行动画处理，效果会非常好

render() {
return (
  <FlipMove
    staggerDurationBy={30}
    duration={750}
    delay={30}
    enterAnimation={this.state.enterLeaveAnimation}
    leaveAnimation={this.state.enterLeaveAnimation}
  >
    {this.state.contestant.map((element, id) => {
      return (
        <li onClick={() => this.rotate()} key={element.name}>
          {element.name}
        </li>
      );
    })}
  </FlipMove>
);}

但是如果我为表格设置动画，它将不起作用:(。

render() {
return (
  <FlipMove
    staggerDurationBy={30}
    duration={750}
    delay={30}
    enterAnimation={this.state.enterLeaveAnimation}
    leaveAnimation={this.state.enterLeaveAnimation}
  >
    <table>
      <tbody>
        {this.state.contestant.map((element, id) => {
          return (
            <tr onClick={() => this.rotate()} key={element.name}>
              <td>{element.name}</td>
              <td>{element.id}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  </FlipMove>
);}

我找不到原因:'(。希望您支持我。非常感谢

Answer 1

使用 react 翻转移动对表格进行动画有时很困难，因为它会在 tbody 中添加一个 div 并导致 thead:nth-child(0) 跨越 100vw，从而破坏表格 View 。因此，最好的可用方法是首先在FlipMove容器中渲染thead标签及其子标签，并且表结构将被保留