Gatsby: About react page transition

[fEyebrow]

I create animated page transitions by "react-addons-css-transition-group".
But The page switching animation was all bound to the target page.
my enter page and leave page is the same page.
what happened?

location.pathname is the same value.

there is code:

render() {
    const { location, children } = this.props;
    return (
      <div>
        <SiteNavi title={siteMetadata.title} {...this.props} />
            <ReactCSSTransitionGroup
              transitionName="example"
              component="div"
              className="transitionWrapper"
              transitionEnterTimeout={500}
              transitionLeaveTimeout={300}
              >
              <div key={location.pathname}
                 style={{position:"absolute", width: "100%"}}
                >
                <div className="vheight">
                  {children()}
                  {console.log(location.pathname)}// There is only one output
                </div>
              </div>
            </ReactCSSTransitionGroup>
        <SiteFooter />
      </div>
    )
  }

[sebastienfi]

Hello @FourEyebrowXiake !
Please see this https://github.com/gatsbyjs/gatsby/issues/1854

[sebastienfi]

https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-transitions

[youfoundron]

@sebastienfi when I use your code I get an error : Cannot read property 'getResourcesForPathname' of undefined.

This is happening because the loader prop on ReplaceComponentRouter is undefined. Not sure how to pass this in or why it is not present.

Anything I could be missing?

[aouerfelli]

@rongierlach Updating Gatsby fixed it for me.

[youfoundron]

@aouerfelli Thanks!

My problem now is that I'm using react-motion's TransitionMotion component and it doesn't seem to be playing nice with the lifecycle of ReplaceComponentRenderer.

Anyone else using an animation library or api other than react-transition-group to achieve a similar effect?

[calpa]

Any update of this issue?

[KyleAMathews]

@calpa yeah, check out the example site @sebastienfi linked to!