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

Posted 2023-03-07

【中文标题】React Animation 的 ReactCSSTransitionGroup 和 CSSTransitionGroup 不能像示例代码中那样工作

【英文标题】：React Animation's ReactCSSTransitionGroup and CSSTransitionGroup cannot work as in the sample code

【发布时间】：2021-07-14 04:24:06

【问题描述】：

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

https://reactjs.org/docs/animation.html https://github.com/reactjs/react-transition-group/tree/v1-stable

演示：

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

它是如何工作的？

【参考方案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

你有没有注意到，如果你点击第二个或第三个词删除它，淡出的词是最后一个？