javascript - 条件渲染和 ReactCSSTransitionGroup 动画

Question

我制作了一个小应用程序，可以根据 Redux 状态呈现不同的组件。我想在其中一个组件呈现时应用“淡入淡出”动画。但是，由于某种原因，它对我不起作用。这是我到目前为止所拥有的:

content.js

class Content extends Component {
  render() {
    const transitionOptions = {
      transitionName: "fade",
      transitionEnterTimeout: 500,
      transitionLeaveTimeout: 500
    }

    if (this.props.page === 'one') {
      return (
        <div>
          <ReactCSSTransitionGroup {...transitionOptions}>
            <Comp1/>
          </ReactCSSTransitionGroup>
        </div>
      );
    } else {
      return (
        <div>
          <ReactCSSTransitionGroup {...transitionOptions}>
            <Copm2/>   
          </ReactCSSTransitionGroup>
        </div>
      );
    } 
  }
}

样式.css

.fade-enter {
  opacity: 0.01;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.fade-leave {
  opacity: 1;
}

.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

我见过 ReactCSSTransitionGroup 被用于向列表中添加和删除项目，但我还没有找到它用于条件渲染的例子。它可以实现吗？也许还有另一个插件可以做到这一点？

Answer 1

我已经多次看到同样的问题。简而言之:您需要有条件地渲染 inside of <ReactCSSTransitionGroup> 的子项。 , 不是 <ReactCSSTransitionGroup>本身。 <ReactCSSTransitionGroup>需要挂载一次然后保留，添加和删除的是 children。

content.js

class Content extends Component {
  render() {
    const transitionOptions = {
      transitionName: "fade",
      transitionEnterTimeout: 500,
      transitionLeaveTimeout: 500
    }

    let theChild = undefined;
    if (this.props.page === 'one') {
        theChild = <Comp1 key="comp1" />;
    } else {
        theChild = <Comp2 key="comp2" />;
    } 

    return (
        <div>
          <ReactCSSTransitionGroup {...transitionOptions}>
            {theChild}
          </ReactCSSTransitionGroup>
        </div>
    );
  }
}

请注意，您还应该添加一个唯一的 key <ReactCSSTransitionGroup> 中的每个 child 的 Prop .这有助于组件识别哪些子项是唯一的，以便正确地为它们进出设置动画。