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>
     )
}

条件渲染和ReactCSSTransitionGroup动画

2 个答案: