如何在不使用路由器的情况下将页面转换添加到 React？答案

【问题标题】：How to add page transitions to React without using the router?如何在不使用路由器的情况下将页面转换添加到 React？
【发布时间】：2016-06-23 15:44:14
【问题描述】：

我尝试使用 ReactCSSTransitionGroup 将页面转换添加到我的应用程序，但没有成功。对于某些页面，它可以工作，但对于某些页面却没有。那里的许多示例展示了如何使用 React 路由器来做到这一点。但是由于我使用 Meteor，所以我使用了不同的路由器（FlowRouter）。

这是我的渲染方法：

render() {
  return (
    <div>
      {this.props.content()}
    </div>
  );
}

这是我尝试添加过渡的方法：

<ReactCSSTransitionGroup
  transitionName="pageTransition"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={300}
  transitionAppear={true}
  transitionAppearTimeout={500}
>
  {/* Content */}
  {React.cloneElement(this.props.content(), {
    key: uuid.v1(),
  })}

</ReactCSSTransitionGroup>

CSS：

//Page transition
.pageTransition-enter {
  opacity: 0.01;
}
.pageTransition-enter.pageTransition-enter-active {
  animation: fadeIn 1s ease-in;
}
.animation-leave {
  opacity: 1;
}
.pageTransition-leave.pageTransition-leave-active {
  animation: fadeIn 3s ease-in;
}
.pageTransition-appear {
  opacity: 0.01;
}
.pageTransition-appear.pageTransition-appear-active {
  animation: opacity 5s ease-in;
}

知道如何进行这项工作吗？

【问题讨论】：

标签： reactjs flow-router

【解决方案1】：

我想通了！您的 CSS 动画正在尝试使用 fadeIn，但这不是 CSS 属性。您需要将其更改为不透明度。像这样：

//Page transition
.pageTransition-enter {
  opacity: 0.01;
}
.pageTransition-enter.pageTransition-enter-active {
  animation: opacity 1s ease-in;
}
.animation-leave {
  opacity: 1;
}
.pageTransition-leave.pageTransition-leave-active {
  animation: opacity 3s ease-in;
}
.pageTransition-appear {
  opacity: 0.01;
}
.pageTransition-appear.pageTransition-appear-active {
  animation: opacity 5s ease-in;
}

【讨论】：

【解决方案2】：

尝试在返回调用之前定义你的内部组件：

render() {
    const clonedElement = <div>{this.props.content()}</div>;

    return (
        <ReactCSSTransitionGroup transitionName="pageTransition" transitionEnterTimeout={500} transitionLeaveTimeout={300} transitionAppear={true} transitionAppearTimeout={500}>
            {clonedElement}
        </ReactCSSTransitionGroup>
      );
    }

【讨论】：