diff --git a/.editorconfig b/.editorconfig
old mode 100644
new mode 100755
diff --git a/.env b/.env
new file mode 100644
index 00000000..71221ab2
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+UMI_UI=none umi dev
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
old mode 100644
new mode 100755
diff --git a/.eslintrc b/.eslintrc
old mode 100644
new mode 100755
diff --git a/.gitignore b/.gitignore
old mode 100644
new mode 100755
index f10089da..d82d7140
--- a/.gitignore
+++ b/.gitignore
@@ -22,9 +22,3 @@ package-lock.json
src/locales/_build
src/locales/**/*.js
recover/
-
-.env
-.env
-.env
-sockets/rs_develop
-src/Untitled-1.txt
diff --git a/.prettierignore b/.prettierignore
old mode 100644
new mode 100755
diff --git a/.prettierrc b/.prettierrc
old mode 100644
new mode 100755
diff --git a/.stylelintrc.json b/.stylelintrc.json
old mode 100644
new mode 100755
diff --git a/.travis.yml b/.travis.yml
old mode 100644
new mode 100755
diff --git a/.umirc.js b/.umirc.js
old mode 100644
new mode 100755
diff --git a/.vscode/launch.json b/.vscode/launch.json
old mode 100644
new mode 100755
diff --git a/.vsls.json b/.vsls.json
old mode 100644
new mode 100755
diff --git a/LICENSE b/LICENSE
old mode 100644
new mode 100755
diff --git a/comty_dev.service b/comty_dev.service
new file mode 100755
index 00000000..7ac93caa
--- /dev/null
+++ b/comty_dev.service
@@ -0,0 +1,11 @@
+[Unit]
+Description=Comty_Development
+
+[Service]
+ExecStart=npm start
+Restart=always
+User=root
+WorkingDirectory=/ycore/development/comty-development
+
+[Install]
+WantedBy=multi-user.target
\ No newline at end of file
diff --git a/config/app.settings.js b/config/app.settings.js
old mode 100644
new mode 100755
diff --git a/config/id_rsa.enc b/config/id_rsa.enc
old mode 100644
new mode 100755
diff --git a/config/keys.js b/config/keys.js
old mode 100644
new mode 100755
diff --git a/config/theme.config.js b/config/theme.config.js
old mode 100644
new mode 100755
diff --git a/config/ycore.config.js b/config/ycore.config.js
old mode 100644
new mode 100755
diff --git a/dev-server.sh b/dev-server.sh
new file mode 100755
index 00000000..96241675
--- /dev/null
+++ b/dev-server.sh
@@ -0,0 +1,53 @@
+#!/bin/sh
+
+pause(){
+ read -p "Press [Enter] key to continue..." fackEnterKey
+}
+
+start_cli_dev(){
+ sudo npm start
+}
+
+start_dev(){
+ systemctl start comty_dev
+ echo "Starting dev server..."
+}
+
+stop_dev(){
+ systemctl stop comty_dev
+ echo "Stoping dev server..."
+}
+
+
+show_menus() {
+ clear
+ echo "~~~~~~~~~~~~~~~~~~~~~"
+ echo " Development Server "
+ echo "~~~~~~~~~~~~~~~~~~~~~"
+ echo "1. Start CLI Server"
+ echo "2. Start Server"
+ echo "3. Stop Server"
+ echo "0. Exit"
+}
+
+read_options(){
+ local choice
+ read -p "Enter choice [ 1 - 3] " choice
+ case $choice in
+ 0) exit 0;;
+ 1) start_cli_dev ;;
+ 2) start_dev ;;
+ 3) stop_dev ;;
+
+ *) echo -e "${RED}Error...${STD}" && sleep 2
+ esac
+}
+
+trap '' SIGINT SIGQUIT SIGTSTP
+
+while true
+do
+
+ show_menus
+ read_options
+done
\ No newline at end of file
diff --git a/globals/debug.json b/globals/debug.json
old mode 100644
new mode 100755
diff --git a/globals/endpoints.js b/globals/endpoints.js
old mode 100644
new mode 100755
diff --git a/globals/settings.js b/globals/settings.js
old mode 100644
new mode 100755
diff --git a/jest.config.js b/jest.config.js
old mode 100644
new mode 100755
diff --git a/manifest.json b/manifest.json
old mode 100644
new mode 100755
diff --git a/mock/_utils.js b/mock/_utils.js
old mode 100644
new mode 100755
diff --git a/mock/route.js b/mock/route.js
old mode 100644
new mode 100755
diff --git a/package.json b/package.json
old mode 100644
new mode 100755
index b9b95a51..14606de4
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "comty-development",
"title": "Comty™",
"DevBuild": true,
- "version": "0.2.02",
+ "version": "0.2.03",
"description": "",
"main": "index.js",
"author": "RageStudio",
diff --git a/public/dark_full_logo.svg b/public/dark_full_logo.svg
old mode 100644
new mode 100755
diff --git a/public/dark_logo.svg b/public/dark_logo.svg
old mode 100644
new mode 100755
diff --git a/public/favicon.ico b/public/favicon.ico
old mode 100644
new mode 100755
diff --git a/public/full_logo.svg b/public/full_logo.svg
old mode 100644
new mode 100755
diff --git a/public/logo.svg b/public/logo.svg
old mode 100644
new mode 100755
diff --git a/service-worker.js b/service-worker.js
old mode 100644
new mode 100755
diff --git a/setupTests.js b/setupTests.js
old mode 100644
new mode 100755
diff --git a/src/@ycore/libs.js b/src/@ycore/libs.js
old mode 100644
new mode 100755
diff --git a/src/@ycore/libs/comty_ng/pre.js b/src/@ycore/libs/comty_ng/pre.js
old mode 100644
new mode 100755
diff --git a/src/@ycore/libs/control_bar/pre.js b/src/@ycore/libs/control_bar/pre.js
old mode 100644
new mode 100755
diff --git a/src/@ycore/libs/ycore_sdcp/leagacy.js b/src/@ycore/libs/ycore_sdcp/leagacy.js
old mode 100644
new mode 100755
diff --git a/src/@ycore/libs/ycore_sdcp/pre.js b/src/@ycore/libs/ycore_sdcp/pre.js
old mode 100644
new mode 100755
diff --git a/src/@ycore/libs/ycore_styles/pre.js b/src/@ycore/libs/ycore_styles/pre.js
old mode 100644
new mode 100755
diff --git a/src/@ycore/libs/ycore_styles/ycore_style.scss b/src/@ycore/libs/ycore_styles/ycore_style.scss
old mode 100644
new mode 100755
diff --git a/src/@ycore/libs/yulio_id/pre.js b/src/@ycore/libs/yulio_id/pre.js
old mode 100644
new mode 100755
index 1303a76d..26d89307
--- a/src/@ycore/libs/yulio_id/pre.js
+++ b/src/@ycore/libs/yulio_id/pre.js
@@ -138,7 +138,7 @@ export function GetAuth(EncUsername, EncPassword, callback) {
};
jquery.ajax(settings)
.done(function (response) {
- console.log(prefix, 'Server response... Dispathing data to login API...', response);
+ console.log(prefix, 'Server response... Dispathing data to login API...');
try {
var identState = JSON.parse(response)['api_status'];
if (identState == 200) {
diff --git a/src/@ycore/ycore_worker.js b/src/@ycore/ycore_worker.js
old mode 100644
new mode 100755
diff --git a/src/components/CoreLoader/index.js b/src/components/CoreLoader/index.js
old mode 100644
new mode 100755
diff --git a/src/components/CoreLoader/styles.less b/src/components/CoreLoader/styles.less
old mode 100644
new mode 100755
diff --git a/src/components/CustomIcons/index.js b/src/components/CustomIcons/index.js
old mode 100644
new mode 100755
diff --git a/src/components/HeaderSearch/index.js b/src/components/HeaderSearch/index.js
old mode 100644
new mode 100755
diff --git a/src/components/HeaderSearch/index.less b/src/components/HeaderSearch/index.less
old mode 100644
new mode 100755
diff --git a/src/components/Layout/ChatSider.js b/src/components/Layout/ChatSider.js
old mode 100644
new mode 100755
diff --git a/src/components/Layout/ChatSider.less b/src/components/Layout/ChatSider.less
old mode 100644
new mode 100755
diff --git a/src/components/Layout/Control.js b/src/components/Layout/Control.js
old mode 100644
new mode 100755
diff --git a/src/components/Layout/Control.less b/src/components/Layout/Control.less
old mode 100644
new mode 100755
diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
old mode 100644
new mode 100755
diff --git a/src/components/Layout/Header.less b/src/components/Layout/Header.less
old mode 100644
new mode 100755
diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js
old mode 100644
new mode 100755
diff --git a/src/components/Layout/Menu.less b/src/components/Layout/Menu.less
old mode 100644
new mode 100755
diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js
old mode 100644
new mode 100755
diff --git a/src/components/Layout/Sider.less b/src/components/Layout/Sider.less
old mode 100644
new mode 100755
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
old mode 100644
new mode 100755
diff --git a/src/components/Layout/logo.scss b/src/components/Layout/logo.scss
old mode 100644
new mode 100755
diff --git a/src/components/LikeBtn/index.js b/src/components/LikeBtn/index.js
old mode 100644
new mode 100755
diff --git a/src/components/LikeBtn/index.scss b/src/components/LikeBtn/index.scss
old mode 100644
new mode 100755
diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js
old mode 100644
new mode 100755
diff --git a/src/components/Loader/Loader.less b/src/components/Loader/Loader.less
old mode 100644
new mode 100755
diff --git a/src/components/MainFeed/index.js b/src/components/MainFeed/index.js
old mode 100644
new mode 100755
diff --git a/src/components/MainSidebar/index.js b/src/components/MainSidebar/index.js
old mode 100644
new mode 100755
diff --git a/src/components/MainSidebar/index.less b/src/components/MainSidebar/index.less
old mode 100644
new mode 100755
diff --git a/src/components/MicroHeader/index.js b/src/components/MicroHeader/index.js
old mode 100644
new mode 100755
diff --git a/src/components/MicroHeader/index.less b/src/components/MicroHeader/index.less
old mode 100644
new mode 100755
diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js
old mode 100644
new mode 100755
diff --git a/src/components/Page/Page.less b/src/components/Page/Page.less
old mode 100644
new mode 100755
diff --git a/src/components/Page/package.json b/src/components/Page/package.json
old mode 100644
new mode 100755
diff --git a/src/components/PageTransition/animations.js b/src/components/PageTransition/animations.js
new file mode 100644
index 00000000..ec23ade1
--- /dev/null
+++ b/src/components/PageTransition/animations.js
@@ -0,0 +1,780 @@
+import { keyframes } from 'styled-components';
+
+export default {
+ moveToLeft: {
+ keyframes: keyframes`
+ from { }
+ to { transform: translateX(-100%); }
+ `,
+ duration: 600,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveFromLeft: {
+ keyframes: keyframes`
+ from { transform: translateX(-100%) };
+ `,
+ duration: 600,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveToRight: {
+ keyframes: keyframes`
+ from { }
+ to { transform: translateX(100%); }
+ `,
+ duration: 600,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveFromRight: {
+ keyframes: keyframes`
+ from { transform: translateX(100%); }
+ `,
+ duration: 600,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveToTop: {
+ keyframes: keyframes`
+ from { }
+ to { transform: translateY(-100%); }
+ `,
+ duration: 600,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveFromTop: {
+ keyframes: keyframes`
+ from { transform: translateY(-100%); }
+ `,
+ duration: 600,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveToBottom: {
+ keyframes: keyframes`
+ from { }
+ to { transform: translateY(100%); }
+ `,
+ duration: 600,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveFromBottom: {
+ keyframes: keyframes`
+ from { transform: translateY(100%); }
+ `,
+ duration: 600,
+ timing: 'ease',
+ fill: 'both'
+ },
+ fade: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0.3; }
+ `,
+ duration: 600,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveToLeftFade: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0.3; transform: translateX(-100%); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveFromLeftFade: {
+ keyframes: keyframes`
+ from { opacity: 0.3; transform: translateX(-100%); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveToRightFade: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0.3; transform: translateX(100%); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveFromRightFade: {
+ keyframes: keyframes`
+ from { opacity: 0.3; transform: translateX(100%); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveToTopFade: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0.3; transform: translateY(-100%); }
+ `,
+ duration: 600,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveFromTopFade: {
+ keyframes: keyframes`
+ from { opacity: 0.3; transform: translateY(-100%); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveToBottomFade: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0.3; transform: translateY(100%); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both'
+ },
+ moveFromBottomFade: {
+ keyframes: keyframes`
+ from { opacity: 0.3; transform: translateY(100%); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both'
+ },
+ scaleDown: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0; transform: scale(0.8); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both'
+ },
+ scaleUp: {
+ keyframes: keyframes`
+ from { opacity: 0; transform: scale(0.8); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both'
+ },
+ scaleUpDown: {
+ keyframes: keyframes`
+ from { opacity: 0; transform: scale(1.2); }
+ `,
+ duration: 500,
+ timing: 'ease',
+ fill: 'both'
+ },
+ scaleDownUp: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0; transform: scale(1.2); }
+ `,
+ duration: 500,
+ timing: 'ease',
+ fill: 'both'
+ },
+ scaleDownCenter: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0; transform: scale(0.7); }
+ `,
+ duration: 400,
+ timing: 'ease',
+ fill: 'both'
+ },
+ scaleUpCenter: {
+ keyframes: keyframes`
+ from { opacity: 0; transform: scale(0.7); }
+ `,
+ duration: 400,
+ timing: 'ease',
+ fill: 'both'
+ },
+ rotateRightSideFirst: {
+ keyframes: keyframes`
+ 0% { }
+ 40% { transform: rotateY(15deg); opacity: 0.8; animation-timing-function: ease-out; }
+ 100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
+ `,
+ duration: 800,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ rotateLeftSideFirst: {
+ keyframes: keyframes`
+ 0% { }
+ 40% { transform: rotateY(-15deg); opacity: 0.8; animation-timing-function: ease-out; }
+ 100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
+ `,
+ duration: 800,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ rotateTopSideFirst: {
+ keyframes: keyframes`
+ 0% { }
+ 40% { transform: rotateX(15deg); opacity: 0.8; animation-timing-function: ease-out; }
+ 100% { transform: scale(0.8) translateZ(-200px); opacity:0; }
+ `,
+ duration: 800,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ rotateBottomSideFirst: {
+ keyframes: keyframes`
+ 0% { }
+ 40% { transform: rotateX(-15deg); opacity: 0.8; animation-timing-function: ease-out; }
+ 100% {transform: scale(0.8) translateZ(-200px); opacity:0; }
+ `,
+ duration: 800,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ flipOutRight: {
+ keyframes: keyframes`
+ from { }
+ to { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
+ `,
+ duration: 500,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '50% 50%'
+ },
+ flipInLeft: {
+ keyframes: keyframes`
+ from { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
+ `,
+ duration: 500,
+ timing: 'ease-out',
+ fill: 'both',
+ origin: '50% 50%'
+ },
+ flipOutLeft: {
+ keyframes: keyframes`
+ from { }
+ to { transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
+ `,
+ duration: 500,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '50% 50%'
+ },
+ flipInRight: {
+ keyframes: keyframes`
+ from { transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
+ `,
+ duration: 500,
+ timing: 'ease-out',
+ fill: 'both',
+ origin: '50% 50%'
+ },
+ flipOutTop: {
+ keyframes: keyframes`
+ from { }
+ to { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
+ `,
+ duration: 500,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '50% 50%'
+ },
+ flipInBottom: {
+ keyframes: keyframes`
+ from { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
+ `,
+ duration: 500,
+ timing: 'ease-out',
+ fill: 'both',
+ origin: '50% 50%'
+ },
+ flipOutBottom: {
+ keyframes: keyframes`
+ from { }
+ to { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
+ `,
+ duration: 500,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '50% 50%'
+ },
+ flipInTop: {
+ keyframes: keyframes`
+ from { transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
+ `,
+ duration: 500,
+ timing: 'ease-out',
+ fill: 'both',
+ origin: '50% 50%'
+ },
+ rotateFall: {
+ keyframes: keyframes`
+ 0% { transform: rotateZ(0deg); }
+ 20% { transform: rotateZ(10deg); animation-timing-function: ease-out; }
+ 40% { transform: rotateZ(17deg); }
+ 60% { transform: rotateZ(16deg); }
+ 100% { transform: translateY(100%) rotateZ(17deg); }
+ `,
+ duration: 1000,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '0% 0%'
+ },
+ rotateOutNewspaper: {
+ keyframes: keyframes`
+ from { }
+ to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
+ `,
+ duration: 500,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '50% 50%'
+ },
+ rotateInNewspaper: {
+ keyframes: keyframes`
+ from { transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; }
+ `,
+ duration: 500,
+ timing: 'ease-out',
+ fill: 'both',
+ origin: '50% 50%'
+ },
+ rotatePushLeft: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0; transform: rotateY(90deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ rotatePushRight: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0; transform: rotateY(-90deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '100% 50%'
+ },
+ rotatePushTop: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0; transform: rotateX(-90deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 0%'
+ },
+ rotatePushBottom: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0; transform: rotateX(90deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 100%'
+ },
+ rotatePullRight: {
+ keyframes: keyframes`
+ from { opacity: 0; transform: rotateY(-90deg); }
+ `,
+ duration: 500,
+ timing: 'ease',
+ fill: 'both',
+ origin: '100% 50%'
+ },
+ rotatePullLeft: {
+ keyframes: keyframes`
+ from { opacity: 0; transform: rotateY(90deg); }
+ `,
+ duration: 500,
+ timing: 'ease',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ rotatePullTop: {
+ keyframes: keyframes`
+ from { opacity: 0; transform: rotateX(-90deg); }
+ `,
+ duration: 500,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 0%'
+ },
+ rotatePullBottom: {
+ keyframes: keyframes`
+ from { opacity: 0; transform: rotateX(90deg); }
+ `,
+ duration: 500,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 100%'
+ },
+ rotateFoldRight: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0; transform: translateX(100%) rotateY(90deg); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ rotateFoldLeft: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0; transform: translateX(-100%) rotateY(-90deg); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both',
+ origin: '100% 50%'
+ },
+ rotateFoldTop: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0; transform: translateY(-100%) rotateX(90deg); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 100%'
+ },
+ rotateFoldBottom: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0; transform: translateY(100%) rotateX(-90deg); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 0%'
+ },
+ rotateUnfoldLeft: {
+ keyframes: keyframes`
+ from { opacity: 0; transform: translateX(-100%) rotateY(-90deg); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both',
+ origin: '100% 50%'
+ },
+ rotateUnfoldRight: {
+ keyframes: keyframes`
+ from { opacity: 0; transform: translateX(100%) rotateY(90deg); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ rotateUnfoldTop: {
+ keyframes: keyframes`
+ from { opacity: 0; transform: translateY(-100%) rotateX(90deg); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 100%'
+ },
+ rotateUnfoldBottom: {
+ keyframes: keyframes`
+ from { opacity: 0; transform: translateY(100%) rotateX(-90deg); }
+ `,
+ duration: 700,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 0%'
+ },
+ rotateRoomLeftOut: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0.3; transform: translateX(-100%) rotateY(90deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '100% 50%'
+ },
+ rotateRoomLeftIn: {
+ keyframes: keyframes`
+ from { opacity: 0.3; transform: translateX(100%) rotateY(-90deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ rotateRoomRightOut: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0.3; transform: translateX(100%) rotateY(-90deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ rotateRoomRightIn: {
+ keyframes: keyframes`
+ from { opacity: 0.3; transform: translateX(-100%) rotateY(90deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '100% 50%'
+ },
+ rotateRoomTopOut: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0.3; transform: translateY(-100%) rotateX(-90deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 100%'
+ },
+ rotateRoomTopIn: {
+ keyframes: keyframes`
+ from { opacity: 0.3; transform: translateY(100%) rotateX(90deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 0%'
+ },
+ rotateRoomBottomOut: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0.3; transform: translateY(100%) rotateX(90deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 0%'
+ },
+ rotateRoomBottomIn: {
+ keyframes: keyframes`
+ from { opacity: 0.3; transform: translateY(-100%) rotateX(-90deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 100%'
+ },
+ rotateCubeLeftOut: {
+ keyframes: keyframes`
+ 0% { }
+ 50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
+ 100% { opacity: 0.3; transform: translateX(-100%) rotateY(-90deg); }
+ `,
+ duration: 600,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '100% 50%'
+ },
+ rotateCubeLeftIn: {
+ keyframes: keyframes`
+ 0% { opacity: 0.3; transform: translateX(100%) rotateY(90deg); }
+ 50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
+ `,
+ duration: 600,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ rotateCubeRightOut: {
+ keyframes: keyframes`
+ 0% { }
+ 50% { animation-timing-function: ease-out; transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
+ 100% { opacity: 0.3; transform: translateX(100%) rotateY(90deg); }
+ `,
+ duration: 600,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ rotateCubeRightIn: {
+ keyframes: keyframes`
+ 0% { opacity: 0.3; transform: translateX(-100%) rotateY(-90deg); }
+ 50% { animation-timing-function: ease-out; transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
+ `,
+ duration: 600,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '100% 50%'
+ },
+ rotateCubeTopOut: {
+ keyframes: keyframes`
+ 0% {}
+ 50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
+ 100% { opacity: 0.3; transform: translateY(-100%) rotateX(90deg); }
+ `,
+ duration: 600,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '50% 100%'
+ },
+ rotateCubeTopIn: {
+ keyframes: keyframes`
+ 0% { opacity: 0.3; transform: translateY(100%) rotateX(-90deg); }
+ 50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
+ `,
+ duration: 600,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '50% 0%'
+ },
+ rotateCubeBottomOut: {
+ keyframes: keyframes`
+ 0% { }
+ 50% { animation-timing-function: ease-out; transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
+ 100% { opacity: 0.3; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
+ `,
+ duration: 600,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '50% 0%'
+ },
+ rotateCubeBottomIn: {
+ keyframes: keyframes`
+ 0% { opacity: 0.3; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
+ 50% { animation-timing-function: ease-out; transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
+ `,
+ duration: 600,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '50% 100%'
+ },
+ rotateCarouselLeftOut: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0.3; transform: translateX(-150%) scale(0.4) rotateY(-65deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '100% 50%'
+ },
+ rotateCarouselLeftIn: {
+ keyframes: keyframes`
+ from { opacity: 0.3; transform: translateX(200%) scale(0.4) rotateY(65deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ rotateCarouselRightOut: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0.3; transform: translateX(200%) scale(0.4) rotateY(65deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '0% 50%'
+ },
+ rotateCarouselRightIn: {
+ keyframes: keyframes`
+ from { opacity: 0.3; transform: translateX(-200%) scale(0.4) rotateY(-65deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '100% 50%'
+ },
+ rotateCarouselTopOut: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0.3; transform: translateY(-200%) scale(0.4) rotateX(65deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 100%'
+ },
+ rotateCarouselTopIn: {
+ keyframes: keyframes`
+ from { opacity: 0.3; transform: translateY(200%) scale(0.4) rotateX(-65deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 0%'
+ },
+ rotateCarouselBottomOut: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0.3; transform: translateY(200%) scale(0.4) rotateX(-65deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 0%'
+ },
+ rotateCarouselBottomIn: {
+ keyframes: keyframes`
+ from { opacity: 0.3; transform: translateY(-200%) scale(0.4) rotateX(65deg); }
+ `,
+ duration: 800,
+ timing: 'ease',
+ fill: 'both',
+ origin: '50% 100%'
+ },
+ rotateSidesOut: {
+ keyframes: keyframes`
+ from { }
+ to { opacity: 0; transform: translateZ(-500px) rotateY(90deg); }
+ `,
+ duration: 500,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '-50% 50%'
+ },
+ rotateSidesIn: {
+ keyframes: keyframes`
+ from { opacity: 0; transform: translateZ(-500px) rotateY(-90deg); }
+ `,
+ duration: 500,
+ timing: 'ease-in',
+ fill: 'both',
+ origin: '150% 50%'
+ },
+ rotateSlideOut: {
+ keyframes: keyframes`
+ 0% { }
+ 25% { opacity: 0.5; transform: translateZ(-500px); }
+ 75% { opacity: 0.5; transform: translateZ(-500px) translateX(-200%); }
+ 100% { opacity: 0.5; transform: translateZ(-500px) translateX(-200%); }
+ `,
+ duration: 1000,
+ timing: 'ease',
+ fill: 'both'
+ },
+ rotateSlideIn: {
+ keyframes: keyframes`
+ 0%, 25% { opacity: 0.5; transform: translateZ(-500px) translateX(200%); }
+ 75% { opacity: 0.5; transform: translateZ(-500px); }
+ 100% { opacity: 1; transform: translateZ(0) translateX(0); }
+ `,
+ duration: 1000,
+ timing: 'ease',
+ fill: 'both'
+ }
+};
\ No newline at end of file
diff --git a/src/components/PageTransition/index.js b/src/components/PageTransition/index.js
new file mode 100644
index 00000000..00025e68
--- /dev/null
+++ b/src/components/PageTransition/index.js
@@ -0,0 +1,80 @@
+import React, { memo } from 'react';
+import { Transition, TransitionGroup } from 'react-transition-group';
+import animations from './animations';
+import presets from './presets';
+import * as Styles from './styles';
+
+function PageTransition({
+ children,
+ enterAnimation: enterAnimationOverride,
+ exitAnimation: exitAnimationOverride,
+ preset,
+ transitionKey,
+ ...rest
+}) {
+ const selectEnterAnimation = () => {
+ if (enterAnimationOverride) {
+ if (typeof enterAnimationOverride === 'string') {
+ return animations[enterAnimationOverride];
+ }
+ return {
+ ...animations[enterAnimationOverride.name],
+ delay: enterAnimationOverride.delay,
+ onTop: enterAnimationOverride.onTop
+ };
+ }
+ if (preset) {
+ return {
+ ...animations[presets[preset].enter.name],
+ delay: presets[preset].enter.delay,
+ onTop: presets[preset].enter.onTop
+ };
+ }
+ return 'rotateSlideIn';
+ };
+
+ const selectExitAnimation = () => {
+ if (exitAnimationOverride) {
+ if (typeof exitAnimationOverride === 'string') {
+ return animations[exitAnimationOverride];
+ }
+ return {
+ ...animations[exitAnimationOverride.name],
+ delay: exitAnimationOverride.delay,
+ onTop: exitAnimationOverride.onTop
+ };
+ }
+ if (preset) {
+ return {
+ ...animations[presets[preset].exit.name],
+ delay: presets[preset].exit.delay,
+ onTop: presets[preset].exit.onTop
+ };
+ }
+ return 'rotateSlideIn';
+ };
+
+ const enterAnimation = selectEnterAnimation();
+ const exitAnimation = selectExitAnimation();
+ const timeout = Math.max(enterAnimation.duration, exitAnimation.duration);
+
+ return (
+