React Animation 的 ReactCSSTransitionGroup 和 CSSTransitionGroup 不能像示例代码那样工作

问题描述

我正在尝试 React Animation 的示例代码：

演示：

https://codesandbox.io/s/dark-forest-ofzfr?file=/src/App.js

        <CsstransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          {items}
        </CsstransitionGroup>

它认为 App 中不存在 index.js。但是如果 CsstransitionGroup 被一些静态文本替换，那么它就可以工作（没有任何动画效果）：

https://codesandbox.io/s/blue-dust-j0y57?file=/src/App.js

与ReactCsstransitionGroup相同：
https://codesandbox.io/s/quizzical-franklin-j2hhp?file=/src/App.js

它是如何工作的？

解决方法

您应该使用 TransitionGroup 和 CSSTransition 而不是 ReactCSSTransitionGroup 和 CSSTransitionGroup 。代码如下

import React from "react";
import { TransitionGroup,CSSTransition } from "react-transition-group";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: ["hello","world","click","me"] };
    this.handleAdd = this.handleAdd.bind(this);
  }

  handleAdd() {
    const newItems = this.state.items.concat([prompt("Enter some text")]);
    this.setState({ items: newItems });
  }

  handleRemove(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i,1);
    this.setState({ items: newItems });
  }

  render() {
    const items = this.state.items.map((item,i) => (
      <CSSTransition
        key={i}
        classNames="example"
        timeout={{ enter: 500,exit: 300 }}
      >
        <div key={item} onClick={() => this.handleRemove(i)}>
          {item}
        </div>
      </CSSTransition>
    ));

    return (
      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <TransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}
        >
          {items}
        </TransitionGroup>
      </div>
    );
  }
}

export default App;

styles.css

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.example-exit {
  opacity: 1;
}
.example-exit.example-exit-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

您可以在 codesandbox 中看到此处，查看此 doc 以了解有关从 v1 迁移到 v2 的更多信息

快速回答：截至 2021 年 4 月的 React's official animation docs 指向 v1 文档，但如果我们使用当前的 react-transition-group 尝试那里的解决方案，那么它将无法工作。原因是从 v2 向前，到现在的 v4 版本，都不能向下兼容 v1。

因此，如果我们正在使用它或探索使用它，请转到文档并立即跳过与 v1 相关的任何信息。