如何在不使用路由器的情况下将页面转换添加到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;
}