React Animation on Components

Author: samdevlops

package.json

@@ -10,7 +10,9 @@
     "bootstrap-social": "5.1.1",
     "cross-fetch": "^3.0.4",
     "font-awesome": "4.7.0",
+    "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",

src/components/DishdetailComponent.js

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { Control, LocalForm, Errors } from 'react-redux-form';
 import { Loading } from './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);
@@ -120,25 +121,37 @@ class CommentForm extends Component{
 
    function  RenderDish({dish}) {
         return (
-            <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>
         );
     }
 
     function RenderComments({comments, postComment, dishId}) {
         var commentList = comments.map(comment => {
             return (
-                <li key={comment.id} >
-                    {comment.comment}
-                    <br /><br />
-                    -- {comment.author}, {new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: '2-digit' }).format(new Date(Date.parse(comment.date)))}
-                    <br /><br />
-                </li>
+                <Stagger in>
+                        {comments.map((comment) => {
+                            return (
+                                <Fade in>
+                                <li key={comment.id}>
+                                <p>{comment.comment}</p>
+                                <p>-- {comment.author} , {new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: '2-digit'}).format(new Date(Date.parse(comment.date)))}</p>
+                                </li>
+                                </Fade>
+                            );
+                        })}
+                </Stagger>
             );
         });
 

src/components/HomeComponent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { baseUrl } from '../shared/baseUrl';
 import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle} from 'reactstrap';
 import { Loading } from './LoadingComponent';
+import { FadeTransform } from 'react-animation-components';
 
 
 function RenderCard({item, isLoading, errMess ,leader}) {
@@ -17,6 +18,11 @@ function RenderCard({item, isLoading, errMess ,leader}) {
     }
     else{
         return(
+            <FadeTransform
+                in
+                transformProps={{
+                    exitTransform: 'scale(0.5) translateY(-50%)'
+                }}>
             <Card>
                 {!!item  && !!item.image && 
                 <CardImg top src={baseUrl + item.image} alt={item.name} />}
@@ -28,6 +34,7 @@ function RenderCard({item, isLoading, errMess ,leader}) {
                 <CardText>{item.description}</CardText>}
                 </CardBody>
             </Card>
+            </FadeTransform>
         );
     }
 }