javascript - 条件渲染和ReactCSSTransitionGroup动画

我已经制作了一个小应用程序，可以根据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>
      );
    }
  }
}

style.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用于添加到列表中或从列表中删除的项目，但是我还没有找到将其用于条件渲染的示例。这是可以实现的吗？也许还有另一个插件可以做到这一点？

最佳答案

我已经看到过多次发布相同的问题。简而言之:您需要在<ReactCSSTransitionGroup>而不是<ReactCSSTransitionGroup>本身内部有条件地呈现子级。 <ReactCSSTransitionGroup>需要挂载一次然后停留，这是添加和删除的子项。

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内的每个 child 添加一个唯一的<ReactCSSTransitionGroup> Prop 。这有助于组件识别哪些子项是唯一的，以便正确地对其进行动画处理。

关于javascript - 条件渲染和ReactCSSTransitionGroup动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46916118/