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

尝试在 return 调用之前定义您的内部组件：

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

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

Answer 2

我想通了！您的 CSS 动画正在尝试使用淡入，但这不是 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;
}

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

How to add page transitions to React without using the router?

reactjs

flow-router