React animation

package.json

@@ -18,6 +18,7 @@
     "react-redux-form": "^1.16.8",
     "react-router-dom": "^4.2.2",
     "react-scripts": "3.4.1",
+    "react-transition-group": "^2.3.0",
     "reactstrap": "^5.0.0",
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",

src/App.css

@@ -35,4 +35,27 @@ address{
 .media-image{
     height: 120px;
     width: 120px;
+}
+
+/* Animation */
+.page-enter {
+    opacity: 0.01;
+    transform: translateX(-100%);
+}
+
+.page-enter-active {
+    opacity: 1;
+    transform: translateX(0%);
+    transition: all 300ms ease-in;
+}
+
+.page-exit {
+    opacity: 1;
+    transform: translateX(0%);
+}
+
+.page-exit-active {
+    opacity: 0.01;
+    transform: translateX(100%);
+    transition: all 300ms ease-out;
 }

src/components/MainComponent.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import {Switch, Route, Redirect, withRouter} from 'react-router-dom';
 import { connect } from 'react-redux';
 import { actions } from 'react-redux-form';
+import {TransitionGroup, CSSTransition} from 'react-transition-group';
 
 import Menu from './MenuComponent';
 import './../App.css';
@@ -77,14 +78,18 @@ class Main extends Component{
             <div>
               <Header />
               <div>
-                <Switch>
-                    <Route path='/home' component={HomePage} />
-                    <Route exact path='/aboutus' component={() => <About leaders={this.props.leaders} />} />} />
-                    <Route exact path='/menu' component={() => <Menu dishes={this.props.dishes} />} />
-                    <Route path='/menu/:dishId' component={DishWithId} />
-                    <Route exact path='/contactus' component={() => <Contact resetFeedbackForm={this.props.resetFeedbackForm} />} />} />
-                    <Redirect to="/home" />
-                </Switch>
+                    <TransitionGroup>
+                        <CSSTransition key={this.props.location.key} classNames="page" timeout={300}>
+                            <Switch>
+                                <Route path='/home' component={HomePage} />
+                                <Route exact path='/aboutus' component={() => <About leaders={this.props.leaders} />} />} />
+                                <Route exact path='/menu' component={() => <Menu dishes={this.props.dishes} />} />
+                                <Route path='/menu/:dishId' component={DishWithId} />
+                                <Route exact path='/contactus' component={() => <Contact resetFeedbackForm={this.props.resetFeedbackForm} />} />} />
+                                <Redirect to="/home" />
+                            </Switch>
+                        </CSSTransition>
+                    </TransitionGroup>
               </div>
               <Footer />
             </div>