Transitions

Explanation

This example uses react-transition-group to animate navigation transitions.

The location.pathname from the response is used to uniquely identify the content. The pathname is used instead of the key so that navigating to the same pathname as the current pathname does not cause a transition.

function render({ response }) {
  const { body:Body } = response;
  return (
    <TransitionGroup>
      <CSSTransition
        key={location.pathname}
        classNames="fade"
        timeout={500}
      >
        <Body response={response} />
      </CSSTransition>
    </TransitionGroup>
  );
}

Live Demo

Use the three buttons at the top of the Sandbox to toggle view modes. Clicking the menu button in the top left corner opens a menu to switch between files.

On GitHub

If you want to run this code locally, the source code is available on GitHub here.