VelocityTransitionGroup to manage page transitions with react-router about velocity-react

[mars]

The key to animating React Router transitions is to add a unique key prop to the route's children, so that the transition group recognizes that the components are changing.

Example of a Route component that animates its children's transitions:

class AppView extends React.Component {
  render() {
    const { pathname } = this.props.location;
    const key = pathname.split('/')[1] || 'root';
    const element = this.props.children || <div/>;
    const elementToAnimate = React.cloneElement(element, { key });

    return (
      <div id="app-view">
        <VelocityTransitionGroup 
          enter={{animation: "fadeIn"}}
          leave={{animation: "fadeOut"}}>

          {elementToAnimate}

        </VelocityTransitionGroup>
      </div>
    );
  }
}

(React 0.14, React Router 1.0.0-rc3, Velocity React 1.1.0)

[fionawhim]

I haven't much used react-router myself. Can anyone else chime in here?

The one I'm most familiar with is https://github.com/larrymyers/react-mini-router, which should work pretty trivially with VelocityTransitionGroup. Just call renderCurrentRoute as a child of VelocityTransitionGroup.

[fionawhim]

Thanks, @mars!

I'll also add that for stuff like this, where your VelocityTransitionGroup has single elements that are coming and going, you may need to use absolute positioning during the transition to get overlap right. Take a look at the LoadingCrossfadeComponent in the demo source code to see one way of doing this.

[py-in-the-sky]

Here's an example from the react-router repo. It uses ReactCSSTransitionGroup instead of velocity-react, but the same design principles apply.