如何使用 react-flip-move 为表格设置动画

Question

通过使用 react-flip-move，我陷入了 animation 问题。

如果我为列表制作动画，效果会很好

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

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

Answer 2

您可以在FlipMove元素内设置容器节点类型，因此可以将其设置为tbody ：

<FlipMove typeName="tbody">
    {data.map((props) => <tr {...props} /> )}
</FlipMove>

Answer 3

您需要在行而不是表格上应用FlipMove ，因此您需要将<FlipMove>移动到<tbody>内。

请在下面的代码和工作代码和框演示。

---

代码片段

render() {
    return (
      <div className="App">
        <h1>Flip list</h1>
        <button onClick={() => this.addToList()}>Add</button>
        <button onClick={() => this.removeFromList()}>Remove</button>
        <table className="data-table">
          <tbody>
            <FlipMove
              staggerDurationBy={30}
              duration={750}
              delay={30}
            >
              {this.state.articles.map(article => (
                <tr key={article.id}>
                  <td>{article.title}</td>
                </tr>
              ))}
            </FlipMove>
          </tbody>
        </table>
      </div>
    );
}