Transition to the next page directly

[nukeop]

I'm using this code to great effect, thank you for sharing it. I have a following question: right now using a transition makes the program correctly leave the previous view, but it transitions to an empty page, then the next view pops in. Is there a way to make it transition directly to the next page?

[maisano]

@nukeop thanks for the kind words.

it depends on how you're composing it. are you wrapping individual routes with the RouteTransition component or are you wrapping a set of routes?

[nukeop]

I'm wrapping a Switch component in the RouteTransition. I want to apply the effect only to a particular block on the page. Here's the relevant render function:

  render() {
    return(
      <Route render={({location, history, match}) => {
        return (
          <MainLayout>
            <RouteTransition
              pathname={location.pathname}
              atEnter={{ opacity: 0 }}
              atLeave={{ opacity: 0 }}
              atActive={{ opacity: 1 }}
              className={styles.transition}
            >
              <Switch key={location.key} location={location}>
                <Route path="/album/:albumId" component={AlbumViewContainer} />
                <Route path="/artist/:artistId" component={ArtistViewContainer} />
                <Route path="/dashboard" component={Dashboard} />
                <Route path="/" component={SearchResultsContainer} />
              </Switch>
            </RouteTransition>
          </MainLayout>
        );
      }
    }>

    </Route>
  );
}

[maisano]

@nukeop what happens if you set the RouteTransition's pathname prop to be location.key?

also, what styles are being set via the styles.transition class name?

[nukeop]

changing pathname to location.key didn't help.

The scss sheet sets the following properties:

.transition {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 1rem;
}

[ColinVDH]

Also experiencing this exact issue with AnimatedSwitch. @nukeop did you figure out how to fix this?