React router and full page overlay transitions

Question

I have a simple application setup so far uses react router and an external API. I have some post archives of different types and when a user requests a detail page the API makes a request, and if it gets a page displays it if not displays a 404.

I'm able to set up transition groups to do nice cross fades between these pages, however the designer wants to do something a bit more old fashioned. He wants to slide over a blank overlay over the page, then slide it off to reveal the new page. Ideally with the title of the new page in this overlay.

I can't find a way to handle doing this with a react however. If this wasn't react I might just animate over a div while loading the other pages entire HTML with JS and then swap the required content sections.

Im currently using React 16.3 with react router DOM 5.0

score 0 · Answer 1 · answered May 29 '19 at 19:03

You can do this with CSS keyframes

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%);
  }
}

Not sure what your skill level with CSS is, but z index 1 will make sure the backdrop is over all your content. The actual animating will be done with transform and translateX.

React Router doesnt have to play any part in this. You can do the animating in the component itself when the component first loads by changing the state of a property of visible from false to true, this will give that empty div the CSS classname which will trigger the animation.

So essentially when the component loads the state is changed and the animation will take place.

you did not provide your code, but the code here should be enough to allow you to implement that functionality.

React router and full page overlay transitions

1 Answers1