React. How to animate transitions between React Router routes (II)

Learn how to create state-dependent animations when navigating between routes using React Router

Image for post
Image for post
Photo by Jonas Thijs on Unsplash

😑 “Limitations” of React Transition Group

Once a component has been assembled, its output animation cannot be changed.

const AnimatedSwitch = withRouter(({ location }) => (
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="slide"
timeout={1000}
>
.slide-exit {
position: absolute;
top: 0;
left: 0;
width: 100%;
transform: translateX(0%);
}
.slide-exit-active {
transform: translateX(-100%);
}

ChildFactory to the rescue

<TransitionGroup
childFactory={child => React.cloneElement(child, {
classNames: animationClassNames
})}

>

🌎 Adding status to React Router routes

history.push({  
pathname: routeGenerator(currentScreen + 1),
state: {previousScreen: currentScreen}
});

🆒 Transitions between routes depending on the state

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Final thoughts

Do you want to read more articles like this?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app