Help with basic CSS transitions using React Router 4

[jrtew]

I've been playing around with this for a bit and have tried setting it up with a couple of different sample projects using React Router 4. I am having a problem getting the transition animations to work correctly - it seems the appear and leave animations are both being used on the page I am navigating to, instead of splitting them up between the new page and old page. For example, when I click on the link to the shortcuts page, that page is instantly loaded, then the leave animations execute, followed by the appear animations - all on the shortcuts page. Am I setting something up incorrectly? Here is an example of my code:

class BodyPage extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return(
            <div>
                <PageTransition>
                    <Switch location={this.props.location}>
                        <Route exact path="/myApp" component={Dashboard}/>
                        <Route exact path="/myApp/shortcuts" component={ShortCuts}?>
                    </Switch>
                </PageTransition>
            </div>
        )
    }
}

class Dashboard extends React.Component {
    render(){
        return(
            <div id="dashboard-container" className="transition-item dashboard-page">
                This is the Dashboard page
                <br />
                <Link to="/myApp/shortcuts">Click here to go to shortcuts</Link>
            </div>
        );
    }
}

class ShortCuts extends React.Component {
    render(){
        return(
            <div  className="transition-item shortcuts-page" >
                This is the shortucts page
                <br />
                 <Link to="/myApp/">Click here to go to the dashboard</Link>
            </div>
        );
    }
}

export {ShortCuts, Dashboard, BodyPage};

And the CSS:

.transition-wrapper {
  position: relative;
  z-index: 1;
  .transition-item {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
  }
}
.dashboard-page {
  overflow: auto;
  box-sizing: border-box;
  padding: 20px;
  height: 100vh;
  background-color: #03a9f4;
  transition: transform 0.5s, opacity 0.5s;

  &.transition-appear {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  &.transition-appear.transition-appear-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  &.transition-leave {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  &.transition-leave.transition-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
.shortcuts-page {
  overflow: auto;
  box-sizing: border-box;
  padding: 20px;
  height: 100vh;
  background-color: #fff;
  transition: transform 0.5s, opacity 0.5s;
  transform: translate3d(0, 0, 0);

  &.transition-appear {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  &.transition-appear.transition-appear-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  &.transition-leave {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  &.transition-leave.transition-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

[trungdq88]

Can you create an example to reproduce this on https://codesandbox.io/ ?

I'll try to craft some example with React Router 4 in codesandbox.io with react-router-page-transition.

[jrtew]

Sure thing! I modified the Simple React Router v4 tutorial from Medium and set it up similar to how I have been using RR4 and the react-router-page-transition package. When navigating using the Home and Roster buttons at top, it will load in the new page, apply the leave animation and then the appear animation all on the new page. Is there something I am setting up incorrectly?

Check it out and let me know what you think! CodeSandbox Link

[trungdq88]

The <Switch> must have location to make the <PageTransition> work. You can pass the location props from your AppContainer as bellow:

class AppContainer extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Content location={this.props.location} />
      </div>
    );
  }
}

class AppContainer extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Content location={this.props.location} />
      </div>
    );
  }
}

Working demo: https://codesandbox.io/s/pp7xqrq0km

Sorry for not mentioned this in the README.

[jrtew]

No worries about the README @trungdq88! This is great - I am glad it was something relatively simply like this that I was missing, and this makes total sense now. I have added the location props in my local version and having it working like the codesandbox one - awesome! Thanks for you help with this and thank you for creating this awesome package.

-jrtew