Question

到目前为止，我有一个简单的应用程序设置，它使用react路由器和一个外部API。我有一些不同类型的帖子档案，并且当用户请求详细页面时，API会发出请求，如果该页面得到显示，则显示该页面，如果不显示404。

我能够设置过渡组以在这些页面之间进行漂亮的交叉淡入淡出，但是设计者希望做一些更老式的事情。他想在页面上的空白叠加层上滑动，然后将其滑开以显示新页面。理想情况下，此叠加层中应包含新页面的标题。

但是我找不到一种方法来处理此问题。如果这没有反应，我可能会在div上进行动画处理，同时用JS将其他HTML页面加载到整个HTML中，然后交换所需的内容部分。

我目前在React Router DOM 5.0中使用React 16.3

Answer 1

您可以使用CSS关键帧完成此操作

this.state = {
    visible: false
}

componentDidMount() {
      this.setState({visible: true})
}

  <div className={this.state.visible
                    ? "backdrop"
                    :  null}>
 </div>

.backdrop {
  z-index: 1;
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation-name: animate-backdrop;
  animation-duration: 2s;
  animation-timing-function: linear;
}

@keyframes animate-backdrop {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0%);
  }
}

不确定您的CSS技能水平是多少，但是z索引1将确保背景覆盖所有内容。实际的动画制作将使用transform和translateX完成。

React Router不必扮演任何角色。您可以在组件首次加载时在组件本身中进行动画处理，方法是将visible属性的状态从false更改为true，这将为空div提供CSS类名，从而触发动画。

因此，从本质上讲，当组件加载时，状态会更改，并且动画会发生。

您没有提供代码，但是这里的代码应该足以允许您实现该功能。

反应路由器和整页覆盖过渡

1 个答案: