reactjs - 如何在不使用路由器的情况下向 React 添加页面转换？

Question

我尝试使用 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;
}

知道如何实现这个功能吗？

Answer 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;
}