react-animation

LitHaxor · Jun 26, 2020 · 071e2a3 · 071e2a3
1 parent 664dbe8
commit 071e2a3
Show file tree

Hide file tree

Showing 6 changed files with 1,284 additions and 60 deletions.
diff --git a/package.json b/package.json
@@ -12,13 +12,16 @@
     "font-awesome": "^4.7.0",
     "jquery": "^3.5.1",
     "popper.js": "^1.16.1",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
+    "react-animation-components": "^3.0.0",
     "react-dom": "^16.13.1",
     "react-popper": "^2.2.3",
     "react-redux": "^7.2.0",
     "react-redux-form": "^1.16.14",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
+    "react-transition-group": "^4.4.1",
     "reactstrap": "^8.4.1",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",

diff --git a/src/App.css b/src/App.css
@@ -35,4 +35,26 @@ address{
 
 .navbar-dark {
   background-color: #512DA8 ;
+}
+
+.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;
 }
diff --git a/src/components/DishDetail.jsx b/src/components/DishDetail.jsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { Control, LocalForm, Errors } from 'react-redux-form';
 import { Loading } from "../redux/LoadingComponent";
 import { baseUrl } from '../shared/baseUrl';
+import { FadeTransform, Fade, Stagger } from 'react-animation-components';
 
 const required = (val) => val && val.length;
 const maxLength = (len) => (val) => !(val) || (val.length <= len);
@@ -100,14 +101,19 @@ const minLength = (len) => (val) => val && (val.length >= len);
 
     function RenderComments({comments, postComment, dishId}) {
         const commentsArray = comments.map((data) =>
+        <Stagger in>
             <div key={data.id}>
+              <Fade in>
                 <ul className="list-unstyled">
                     <li>{data.comment}</li>
                 </ul>
                 <ul className="list-unstyled">
                     <li>-- {data.author} {new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: '2-digit'}).format(new Date(Date.parse(data.date)))}</li>
                 </ul>
-            </div>
+              </Fade>
+              </div>
+        </Stagger>
+
         );
 
         return (
@@ -122,13 +128,18 @@ const minLength = (len) => (val) => val && (val.length >= len);
 
     function RenderDish({dish}) {
         return (
-            <Card>
-                <CardImg top src={baseUrl + dish.image} alt={dish.name}/>
-                <CardBody>
-                    <CardTitle>{dish.name}</CardTitle>
-                    <CardText>{dish.description}</CardText>
-                </CardBody>
-            </Card>
+                  <FadeTransform
+                  in
+                  transformProps={{
+                      exitTransform: 'scale(0.5) translateY(-50%)'}}>
+                      <Card>
+                          <CardImg top src={baseUrl + dish.image} alt={dish.name} />
+                          <CardBody>
+                              <CardTitle>{dish.name}</CardTitle>
+                              <CardText>{dish.description}</CardText>
+                          </CardBody>
+                      </Card>
+              </FadeTransform>
         );
 
     }

diff --git a/src/components/HomeComponent.jsx b/src/components/HomeComponent.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import {Card,CardImg,CardText,CardBody,CardTitle,CardSubtitle} from 'reactstrap';
 import {Loading} from '../redux/LoadingComponent';
 import{baseUrl} from '../shared/baseUrl';
+import { FadeTransform } from 'react-animation-components';
+
 function RenderCard({item, isLoading, errMess})
 { 
 
@@ -18,15 +20,20 @@ function RenderCard({item, isLoading, errMess})
     }
     else
         return(
-
-            <Card>
-                    <CardImg src={baseUrl + item.image} alt={baseUrl + item.name} />
+            <FadeTransform
+                in
+                transformProps={{
+                    exitTransform: 'scale(0.5) translateY(-50%)'
+                }}>
+                <Card>
+                    <CardImg src={baseUrl + item.image} alt={item.name} />
                     <CardBody>
-                        <CardTitle>{item.name}</CardTitle>
-                        {item.designation ? <CardSubtitle>{item.designation}</CardSubtitle>:null}
-                        <CardText>{item.description}</CardText>
+                    <CardTitle>{item.name}</CardTitle>
+                    {item.designation ? <CardSubtitle>{item.designation}</CardSubtitle> : null }
+                    <CardText>{item.description}</CardText>
                     </CardBody>
-            </Card>
+                </Card>
+            </FadeTransform>
         );
 }
 

diff --git a/src/components/MainComponent.jsx b/src/components/MainComponent.jsx
@@ -10,7 +10,7 @@ import {Switch, Route, Redirect, withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import {postComment, fetchDishes, fetchComments, fetchPromos} from "../redux/ActionCreator";
 import {actions} from 'react-redux-form';
-
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
 const mapStateToProps = state => {
     return {
         dishes: state.dishes,
@@ -69,14 +69,18 @@ class Main extends Component {
         return (
             <div>
                 <Header />
-                <Switch>
-                    <Route path="/home" component={HomePage} />
-                    <Route exact path="/menu" component={() => <Menu dishes={this.props.dishes}/>}/>
-                    <Route path="/menu/:dishId" component={DishWithId} />
-                    <Route exact path="/aboutus" component={() => <About leaders={this.props.leaders}/>} />
-                    <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="/menu" component={() => <Menu dishes={this.props.dishes}/>}/>
+                            <Route path="/menu/:dishId" component={DishWithId} />
+                            <Route exact path="/aboutus" component={() => <About leaders={this.props.leaders}/>} />
+                            <Route exact path='/contactus' component={() => <Contact resetFeedbackForm={this.props.resetFeedbackForm} />} />
+                            <Redirect to="home" />
+                        </Switch>
+                    </CSSTransition>
+                </TransitionGroup>
                 <Footer />
             </div>
         );