Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ht7 #55

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Ht7 #55

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fd68f60
add HT6
koretskiyav Jan 15, 2021
f4f7b96
init
chertt007 Jan 19, 2021
496f3ad
added routing from /restaurants
chertt007 Jan 19, 2021
43cae7d
HT7 excludes styling ready
chertt007 Jan 21, 2021
e15c144
added: CSS Transition on Reviews
chertt007 Jan 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/basket/basket.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
.basket-animation-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 10000ms, transform 10000ms;
transition: opacity 300ms, transform 300ms;
}

.basket-animation-exit {
Expand All @@ -16,5 +16,5 @@
.basket-animation-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 10000ms, transform 10000ms;
transition: opacity 300ms, transform 300ms;
}
12 changes: 9 additions & 3 deletions src/components/reviews/reviews.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
import Review from './review';
import ReviewForm from './review-form';
import styles from './reviews.module.css';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

import { loadReviews, loadUsers } from '../../redux/actions';
import {
Expand All @@ -31,9 +32,14 @@ const Reviews = ({

return (
<div className={styles.reviews}>
{reviews.map((id) => (
<Review key={id} id={id} />
))}
<TransitionGroup>
{reviews.map((id) => (
<CSSTransition key={id} timeout={1300} classNames={{ ...styles }}>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

сюда лучше не передавать лишние стили, которые не касаются анимации (либо отдельный файл сделать, либо из объекта стилей отобрать нужное)

<Review id={id} />
</CSSTransition>
))}
</TransitionGroup>

<ReviewForm restaurantId={restaurantId} />
</div>
);
Expand Down
21 changes: 21 additions & 0 deletions src/components/reviews/reviews.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,24 @@
max-width: 884px;
width: 100%;
}

.review-animation-enter {
opacity: 0;
transform: scale(0.9);
}

.review-animation-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 1300ms, transform 1300ms;
}

.review-animation-exit {
opacity: 1;
}

.review-animation-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 1300ms, transform 1300ms;
}