Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit e6288fd

Browse files
committedMay 31, 2020
React Animation on Components
1 parent 8996e31 commit e6288fd

File tree

4 files changed

+519
-22
lines changed

4 files changed

+519
-22
lines changed
 

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
"bootstrap-social": "5.1.1",
1111
"cross-fetch": "^3.0.4",
1212
"font-awesome": "4.7.0",
13+
"prop-types": "^15.7.2",
1314
"react": "^16.13.1",
15+
"react-animation-components": "^3.0.0",
1416
"react-dom": "^16.13.1",
1517
"react-popper": "^2.2.3",
1618
"react-redux": "^7.2.0",

‎src/components/DishdetailComponent.js

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
44
import { Control, LocalForm, Errors } from 'react-redux-form';
55
import { Loading } from './LoadingComponent';
66
import { baseUrl } from '../shared/baseUrl';
7+
import { FadeTransform, Fade, Stagger } from 'react-animation-components';
78

89
const required = (val) => val && val.length;
910
const maxLength = (len) => (val) => !(val) || (val.length <= len);
@@ -120,25 +121,37 @@ class CommentForm extends Component{
120121

121122
function RenderDish({dish}) {
122123
return (
123-
<Card>
124+
<FadeTransform
125+
in
126+
transformProps={{
127+
exitTransform: 'scale(0.5) translateY(-50%)'
128+
}}>
129+
<Card>
124130
<CardImg top src={baseUrl + dish.image} alt={dish.name} />
125131
<CardBody>
126132
<CardTitle>{dish.name}</CardTitle>
127133
<CardText>{dish.description}</CardText>
128134
</CardBody>
129135
</Card>
136+
</FadeTransform>
130137
);
131138
}
132139

133140
function RenderComments({comments, postComment, dishId}) {
134141
var commentList = comments.map(comment => {
135142
return (
136-
<li key={comment.id} >
137-
{comment.comment}
138-
<br /><br />
139-
-- {comment.author}, {new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: '2-digit' }).format(new Date(Date.parse(comment.date)))}
140-
<br /><br />
141-
</li>
143+
<Stagger in>
144+
{comments.map((comment) => {
145+
return (
146+
<Fade in>
147+
<li key={comment.id}>
148+
<p>{comment.comment}</p>
149+
<p>-- {comment.author} , {new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: '2-digit'}).format(new Date(Date.parse(comment.date)))}</p>
150+
</li>
151+
</Fade>
152+
);
153+
})}
154+
</Stagger>
142155
);
143156
});
144157

‎src/components/HomeComponent.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import { baseUrl } from '../shared/baseUrl';
33
import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle} from 'reactstrap';
44
import { Loading } from './LoadingComponent';
5+
import { FadeTransform } from 'react-animation-components';
56

67

78
function RenderCard({item, isLoading, errMess ,leader}) {
@@ -17,6 +18,11 @@ function RenderCard({item, isLoading, errMess ,leader}) {
1718
}
1819
else{
1920
return(
21+
<FadeTransform
22+
in
23+
transformProps={{
24+
exitTransform: 'scale(0.5) translateY(-50%)'
25+
}}>
2026
<Card>
2127
{!!item && !!item.image &&
2228
<CardImg top src={baseUrl + item.image} alt={item.name} />}
@@ -28,6 +34,7 @@ function RenderCard({item, isLoading, errMess ,leader}) {
2834
<CardText>{item.description}</CardText>}
2935
</CardBody>
3036
</Card>
37+
</FadeTransform>
3138
);
3239
}
3340
}

‎yarn.lock

Lines changed: 490 additions & 15 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.