条件渲染与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>
      );
    } 
  }
}

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用于添加项并将其移除到列表中，但我还没有找到一个用于条件呈现的示例。这能实现吗？也许还有另外一句话能起这个作用？

Answer 1

我见过同样的问题贴了很多次了。简而言之:您需要在<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内部的每个子级添加一个唯一的<ReactCSSTransitionGroup>支柱。这有助于组件识别哪些子组件是唯一的，以便正确地使它们在内外动画。

Answer 2

下面是我的代码片段

render() {       
    return (
            <CSSTransitionGroup
                transitionName="slide"
                transitionEnterTimeout={500}
                transitionLeaveTimeout={500}
            >
            { id === targetID ? (

                <div>
                    <SectionList id={id} />
                </div>

            ) : '' }
            </CSSTransitionGroup>
     )
}