Animated transitions

In this section, we are going to add a bit of animation when users navigate to different pages. We do this using the TransitionGroup and CSSTransition components from the react-transition-group npm package, as shown in the following steps:

1. So, let's first install this package with its TypeScript types:

npm install react-transition-group
npm install @types/react-transition-group --save-dev

TransitionGroup keeps track of all its children inside its local state and calculates when children are entering or exiting. CSSTransition takes whether children are leaving or exiting from TransitionGroup and applies CSS classes to the children based on that status. So, TransitionGroup and CSSTransition can wrap our routes and invoke CSS classes that we can create to animate pages in and out.

2. So, let's import these components into Routes.tsx:

import { CSSTransition...