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

【问题标题】：React Animation's ReactCSSTransitionGroup and CSSTransitionGroup cannot work as in the sample codeReact Animation 的 ReactCSSTransitionGroup 和 CSSTransitionGroup 不能像示例代码中那样工作
【发布时间】：2021-07-14 04:24:06
【问题描述】：

我正在尝试 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

它是如何工作的？

【问题讨论】：

标签： reactjs react-animations

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您应该使用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 的更多信息

【讨论】：

您说“您应该使用 TransitionGroup 和 CSSTransition 而不是 ReactCSSTransitionGroup 和 CSSTransitionGroup”，但这是为什么呢？示例代码中不就是这样吗？不知何故，我觉得这是编程的新时代：这样做，它会奏效，但为什么以及如何——不知道......
文档说“CSSTransitionGroup 是一个基于 TransitionGroup 的高级 API，当 React 组件进入或离开 DOM 时，它是一种执行 CSS 过渡和动画的简单方法”，而你是说不要t 使用 CSSTransitionGroup 但使用 TransitionGroup
你有没有注意到，如果你点击第二个或第三个词删除它，淡出的词是最后一个？