From 0f09078bbf8c0663da1d009c2e65f6b02eda4443 Mon Sep 17 00:00:00 2001 From: Fedor Katurov <gotham48@gmail.com> Date: Fri, 11 Sep 2020 13:27:04 +0700 Subject: [PATCH] added fading animations --- src/containers/App.tsx | 18 ++-------- src/containers/main/MainRouter/index.tsx | 33 ++++++++++++++++++ src/styles/global.scss | 43 ++++++++++++++++++++++++ 3 files changed, 78 insertions(+), 16 deletions(-) create mode 100644 src/containers/main/MainRouter/index.tsx diff --git a/src/containers/App.tsx b/src/containers/App.tsx index a67ca5e5..d90a8e15 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -2,21 +2,15 @@ import React, { FC } from 'react'; import { connect } from 'react-redux'; import { hot } from 'react-hot-loader'; import { ConnectedRouter } from 'connected-react-router'; -import { Switch, Route, Redirect } from 'react-router-dom'; import { history } from '~/redux/store'; -import { FlowLayout } from '~/containers/flow/FlowLayout'; import { MainLayout } from '~/containers/main/MainLayout'; import { Sprites } from '~/sprites/Sprites'; -import { URLS } from '~/constants/urls'; import { Modal } from '~/containers/dialogs/Modal'; import { selectModal } from '~/redux/modal/selectors'; import { BlurWrapper } from '~/components/containers/BlurWrapper'; import { PageCover } from '~/components/containers/PageCover'; -import { NodeLayout } from './node/NodeLayout'; import { BottomContainer } from '~/containers/main/BottomContainer'; -import { BorisLayout } from './node/BorisLayout'; -import { ErrorNotFound } from './pages/ErrorNotFound'; -import { ProfilePage } from './profile/ProfilePage'; +import { MainRouter } from '~/containers/main/MainRouter'; const mapStateToProps = state => ({ modal: selectModal(state), @@ -35,15 +29,7 @@ const Component: FC<IProps> = ({ modal: { is_shown } }) => { <Modal /> <Sprites /> - <Switch> - <Route exact path={URLS.BASE} component={FlowLayout} /> - <Route path={URLS.NODE_URL(':id')} component={NodeLayout} /> - <Route path={URLS.BORIS} component={BorisLayout} /> - <Route path={URLS.ERRORS.NOT_FOUND} component={ErrorNotFound} /> - <Route path={URLS.PROFILE_PAGE(':username')} component={ProfilePage} /> - - <Redirect to="/" /> - </Switch> + <MainRouter /> </MainLayout> </BlurWrapper> diff --git a/src/containers/main/MainRouter/index.tsx b/src/containers/main/MainRouter/index.tsx new file mode 100644 index 00000000..13f6d7ad --- /dev/null +++ b/src/containers/main/MainRouter/index.tsx @@ -0,0 +1,33 @@ +import React, { FC } from 'react'; +import { URLS } from '~/constants/urls'; +import { FlowLayout } from '~/containers/flow/FlowLayout'; +import { NodeLayout } from '~/containers/node/NodeLayout'; +import { BorisLayout } from '~/containers/node/BorisLayout'; +import { ErrorNotFound } from '~/containers/pages/ErrorNotFound'; +import { ProfilePage } from '~/containers/profile/ProfilePage'; +import { CSSTransition, TransitionGroup } from 'react-transition-group'; +import { Redirect, Route, Switch, useLocation } from 'react-router'; + +interface IProps {} + +const MainRouter: FC<IProps> = () => { + const location = useLocation(); + + return ( + <TransitionGroup> + <CSSTransition key={location.key} classNames="fade" timeout={500}> + <Switch location={location}> + <Route exact path={URLS.BASE} component={FlowLayout} /> + <Route path={URLS.NODE_URL(':id')} component={NodeLayout} /> + <Route path={URLS.BORIS} component={BorisLayout} /> + <Route path={URLS.ERRORS.NOT_FOUND} component={ErrorNotFound} /> + <Route path={URLS.PROFILE_PAGE(':username')} component={ProfilePage} /> + + <Redirect to="/" /> + </Switch> + </CSSTransition> + </TransitionGroup> + ); +}; + +export { MainRouter }; diff --git a/src/styles/global.scss b/src/styles/global.scss index 98ac2bfa..961fc74d 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -154,3 +154,46 @@ a { ::-webkit-scrollbar-corner { background: transparent; } + +@keyframes fading { + 0% { + opacity: 1; + background: red; + transform: rotate(45deg); + } + 100% { + opacity: 0; + background: blue; + transform: rotate(-45deg); + } +} + +:global { + .fade-enter { + opacity: 0; + transition: opacity 0.5s; + + &-active { + opacity: 1; + transition: opacity 0.5s; + } + + &-done { + opacity: 1; + } + } + + .fade-exit { + opacity: 1; + transition: opacity 0.5s; + + &-active { + opacity: 0; + transition: opacity 0.5s; + } + + &-done { + opacity: 0; + } + } +}