From d8df816597cd92259a179043da2973dd9d05b60f Mon Sep 17 00:00:00 2001 From: loxygenk Date: Mon, 11 Oct 2021 00:40:43 +0900 Subject: [PATCH 01/14] =?UTF-8?q?=F0=9F=93=A6=20Add=20react-transition-gro?= =?UTF-8?q?up?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 ++ pnpm-lock.yaml | 35 +++++++++++++++++++++++++++++++---- 2 files changed, 33 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index f3f66b4..c7e859d 100644 --- a/package.json +++ b/package.json @@ -18,10 +18,12 @@ "homepage": "https://github.com/loxygenK/f4n.dev#readme", "dependencies": { "@svgr/webpack": "^5.5.0", + "@types/react-transition-group": "^4.4.3", "@types/webpack-dev-middleware": "^5.0.2", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^5.3.0", + "react-transition-group": "^4.4.2", "ress": "^4.0.0", "webpack-dev-middleware": "^5.2.1" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0669c0e..c737535 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,6 +13,7 @@ specifiers: '@types/react': ^17.0.20 '@types/react-dom': ^17.0.9 '@types/react-router-dom': ^5.3.0 + '@types/react-transition-group': ^4.4.3 '@types/sass': ^1.16.1 '@types/webpack': ^5.28.0 '@types/webpack-dev-middleware': ^5.0.2 @@ -31,6 +32,7 @@ specifiers: react: ^17.0.2 react-dom: ^17.0.2 react-router-dom: ^5.3.0 + react-transition-group: ^4.4.2 ress: ^4.0.0 sass: ^1.39.0 sass-loader: ^12.1.0 @@ -47,10 +49,12 @@ specifiers: dependencies: '@svgr/webpack': 5.5.0 + '@types/react-transition-group': 4.4.3 '@types/webpack-dev-middleware': 5.0.2_webpack-cli@4.8.0 react: 17.0.2 react-dom: 17.0.2_react@17.0.2 react-router-dom: 5.3.0_react@17.0.2 + react-transition-group: 4.4.2_react-dom@17.0.2+react@17.0.2 ress: 4.0.0 webpack-dev-middleware: 5.2.1_webpack@5.52.0 @@ -1568,7 +1572,6 @@ packages: /@types/prop-types/15.7.4: resolution: {integrity: sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==} - dev: true /@types/q/1.5.5: resolution: {integrity: sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==} @@ -1603,13 +1606,18 @@ packages: '@types/react': 17.0.20 dev: true + /@types/react-transition-group/4.4.3: + resolution: {integrity: sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==} + dependencies: + '@types/react': 17.0.20 + dev: false + /@types/react/17.0.20: resolution: {integrity: sha512-wWZrPlihslrPpcKyCSlmIlruakxr57/buQN1RjlIeaaTWDLtJkTtRW429MoQJergvVKc4IWBpRhWw7YNh/7GVA==} dependencies: '@types/prop-types': 15.7.4 '@types/scheduler': 0.16.2 csstype: 3.0.8 - dev: true /@types/retry/0.12.1: resolution: {integrity: sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==} @@ -1623,7 +1631,6 @@ packages: /@types/scheduler/0.16.2: resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==} - dev: true /@types/serve-index/1.9.1: resolution: {integrity: sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==} @@ -2644,7 +2651,6 @@ packages: /csstype/3.0.8: resolution: {integrity: sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==} - dev: true /debug/2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} @@ -2802,6 +2808,13 @@ packages: utila: 0.4.0 dev: true + /dom-helpers/5.2.1: + resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==} + dependencies: + '@babel/runtime': 7.15.4 + csstype: 3.0.8 + dev: false + /dom-serializer/0.2.2: resolution: {integrity: sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==} dependencies: @@ -5009,6 +5022,20 @@ packages: tiny-warning: 1.0.3 dev: false + /react-transition-group/4.4.2_react-dom@17.0.2+react@17.0.2: + resolution: {integrity: sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==} + peerDependencies: + react: '>=16.6.0' + react-dom: '>=16.6.0' + dependencies: + '@babel/runtime': 7.15.4 + dom-helpers: 5.2.1 + loose-envify: 1.4.0 + prop-types: 15.7.2 + react: 17.0.2 + react-dom: 17.0.2_react@17.0.2 + dev: false + /react/17.0.2: resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==} engines: {node: '>=0.10.0'} From 833119ac17bfdffd2eae40cabea52afe3b69d3da Mon Sep 17 00:00:00 2001 From: loxygenk Date: Mon, 11 Oct 2021 00:41:08 +0900 Subject: [PATCH 02/14] =?UTF-8?q?=E2=9C=A8=20Prepare=20for=20implementing?= =?UTF-8?q?=20animation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Router.tsx | 38 +++++++++++++++++++++++++++++--------- 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/src/pages/Router.tsx b/src/pages/Router.tsx index 3375322..f46915c 100644 --- a/src/pages/Router.tsx +++ b/src/pages/Router.tsx @@ -1,16 +1,36 @@ import React from "react"; -import { BrowserRouter, Route, Switch } from "react-router-dom"; +import { BrowserRouter, Route, RouteComponentProps, Switch, withRouter } from "react-router-dom"; +import { TransitionGroup, CSSTransition } from "react-transition-group"; import { ContentWrapper } from "~/comps/layout/CotentWrapper"; import { Main } from "./main/Main"; import { Splash } from "./splash/Splash"; -export const AppRouter = () => ( - +class InternalAppRouter extends React.Component { + render() { + return ( + + + + + + + + + + + ); + } +} + +export const AppRouter = () => { + const WithRoutered = withRouter(InternalAppRouter); + + return ( - - - - + - -); + ); +}; From 67d45875d85513c77564ea851d293be388d4dbcb Mon Sep 17 00:00:00 2001 From: loxygenk Date: Mon, 11 Oct 2021 00:41:34 +0900 Subject: [PATCH 03/14] =?UTF-8?q?=E2=AD=90=20Add=20new=20animation=20for?= =?UTF-8?q?=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/comps/shared/SimpleButton.module.scss | 38 +++++++++++++++++++++-- src/pages/main/Main.module.scss | 2 +- src/styling/animation.module.scss | 2 -- 3 files changed, 37 insertions(+), 5 deletions(-) diff --git a/src/comps/shared/SimpleButton.module.scss b/src/comps/shared/SimpleButton.module.scss index 305016f..97bd982 100644 --- a/src/comps/shared/SimpleButton.module.scss +++ b/src/comps/shared/SimpleButton.module.scss @@ -1,13 +1,47 @@ @use "~/styling/animation.module.scss"; @use "~/styling/color.module.scss"; +$skew_original: -15deg; + .wrapper { + position: relative; + padding: 0.5em 1.5em; + overflow: hidden; border: 2px solid color.get-theme-color(text-color-accent-primary); line-height: 100%; - vertical-align: center; + vertical-align: middle; + + transition: 0.2s all; + + &:before { + position: absolute; + top: 0; + left: 0; + + z-index: -1; + content: ""; + width: 110%; + height: 100%; + background: color.get-theme-color(background-alt); + transform-origin: right top; + transform: skewX($skew_original) scale(0, 1); + transition: 0.4s transform; + } + + &:hover { + transform: scale(1.10); + + &:before { + transform-origin: left top; + transform: skewX($skew_original) scale(1, 1); + } + } + + &:active { + transform: scale(1.05); + } - @include animation.hover; @include animation.click; } diff --git a/src/pages/main/Main.module.scss b/src/pages/main/Main.module.scss index b1f3d7d..c95734c 100644 --- a/src/pages/main/Main.module.scss +++ b/src/pages/main/Main.module.scss @@ -12,7 +12,7 @@ grid-auto-flow: column; grid-auto-columns: fix-content; - grid-gap: 3em; + grid-gap: 2em; justify-content: center; width: 100%; diff --git a/src/styling/animation.module.scss b/src/styling/animation.module.scss index 3aaf690..65529ff 100644 --- a/src/styling/animation.module.scss +++ b/src/styling/animation.module.scss @@ -7,8 +7,6 @@ } @mixin click($duration: 0.2s, $scale: 1.05) { - transition: $duration all; - &:active { transform: scale($scale); } From 1c98ed541f239d5ecd3c55b3ab9d384558d4b67c Mon Sep 17 00:00:00 2001 From: loxygenK Date: Tue, 12 Oct 2021 14:51:35 +0900 Subject: [PATCH 04/14] =?UTF-8?q?=E2=AD=90=20Implement=20transition=20anim?= =?UTF-8?q?ation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/comps/shared/SimpleButton.tsx | 5 ++- src/pages/Router.tsx | 42 ++++++++----------- src/pages/main/Main.module.scss | 2 +- .../transition/TransitionAnimator.module.scss | 29 +++++++++++++ src/pages/transition/TransitionAnimator.tsx | 34 +++++++++++++++ 5 files changed, 85 insertions(+), 27 deletions(-) create mode 100644 src/pages/transition/TransitionAnimator.module.scss create mode 100644 src/pages/transition/TransitionAnimator.tsx diff --git a/src/comps/shared/SimpleButton.tsx b/src/comps/shared/SimpleButton.tsx index 3e34154..7defa84 100644 --- a/src/comps/shared/SimpleButton.tsx +++ b/src/comps/shared/SimpleButton.tsx @@ -1,4 +1,5 @@ import React from "react"; +import {Link} from "react-router-dom"; import styles from "./SimpleButton.module.scss"; export type SimpleButtonProps = { @@ -6,7 +7,7 @@ export type SimpleButtonProps = { linkTo: string; }; export const SimpleButton = ({ caption, linkTo }: SimpleButtonProps) => ( - + {caption} - + ); diff --git a/src/pages/Router.tsx b/src/pages/Router.tsx index f46915c..c722d6b 100644 --- a/src/pages/Router.tsx +++ b/src/pages/Router.tsx @@ -1,36 +1,30 @@ import React from "react"; -import { BrowserRouter, Route, RouteComponentProps, Switch, withRouter } from "react-router-dom"; -import { TransitionGroup, CSSTransition } from "react-transition-group"; +import { BrowserRouter, Route, RouteComponentProps, Switch, useLocation, withRouter } from "react-router-dom"; import { ContentWrapper } from "~/comps/layout/CotentWrapper"; import { Main } from "./main/Main"; import { Splash } from "./splash/Splash"; +import { TransitionAnimator } from "./transition/TransitionAnimator"; -class InternalAppRouter extends React.Component { - render() { - return ( +export const InternalAppRouter = () => { + const location = useLocation(); + + return ( - - - - - - - - + + + + + + - ); - } -} + ); +}; export const AppRouter = () => { - const WithRoutered = withRouter(InternalAppRouter); - return ( - + - ); -}; + ) + +} diff --git a/src/pages/main/Main.module.scss b/src/pages/main/Main.module.scss index c95734c..01a74e4 100644 --- a/src/pages/main/Main.module.scss +++ b/src/pages/main/Main.module.scss @@ -11,7 +11,7 @@ display: grid; grid-auto-flow: column; - grid-auto-columns: fix-content; + grid-auto-columns: max-content; grid-gap: 2em; justify-content: center; diff --git a/src/pages/transition/TransitionAnimator.module.scss b/src/pages/transition/TransitionAnimator.module.scss new file mode 100644 index 0000000..6fcdb21 --- /dev/null +++ b/src/pages/transition/TransitionAnimator.module.scss @@ -0,0 +1,29 @@ + +.page-enter { + opacity: 0; + transform: scale(1.1); + background-color: red; + transition: opacity 300ms, transform 300ms; +} + +.page-enter-active { + opacity: 1; + transform: scale(1); + transition: opacity 300ms, transform 300ms; + background-color: blue; +} + +.page-exit { + opacity: 1; + transform: scale(1); + transition: opacity 300ms, transform 300ms; + background-color: yellow; +} + +.page-exit-active { + opacity: 0; + transform: scale(0.9); + transition: opacity 300ms, transform 300ms; + background-color: green; +} + diff --git a/src/pages/transition/TransitionAnimator.tsx b/src/pages/transition/TransitionAnimator.tsx new file mode 100644 index 0000000..afc41ae --- /dev/null +++ b/src/pages/transition/TransitionAnimator.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import {Route, RouteProps, useLocation} from "react-router-dom"; +import {TransitionGroup, CSSTransition} from "react-transition-group"; + +import styles from "./TransitionAnimator.module.scss"; + +export type TransitionAnimatorProps = { + children: React.ReactNode; +} + +export const TransitionAnimator = ({children}: TransitionAnimatorProps) => { + const location = useLocation(); + + console.log(location.pathname); + + return ( + + + {children} + + + ); +} From 88a7ce570c5dc1a73766a4db418788e30c793ceb Mon Sep 17 00:00:00 2001 From: loxygenK Date: Tue, 12 Oct 2021 15:10:07 +0900 Subject: [PATCH 05/14] =?UTF-8?q?=F0=9F=92=AB=20Intermediate=20pnpm=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/comps/shared/SimpleButton.tsx | 2 +- src/pages/Router.tsx | 11 +++--- src/pages/transition/TransitionAnimator.tsx | 42 ++++++++++----------- 3 files changed, 27 insertions(+), 28 deletions(-) diff --git a/src/comps/shared/SimpleButton.tsx b/src/comps/shared/SimpleButton.tsx index 7defa84..6abf39c 100644 --- a/src/comps/shared/SimpleButton.tsx +++ b/src/comps/shared/SimpleButton.tsx @@ -1,5 +1,5 @@ import React from "react"; -import {Link} from "react-router-dom"; +import { Link } from "react-router-dom"; import styles from "./SimpleButton.module.scss"; export type SimpleButtonProps = { diff --git a/src/pages/Router.tsx b/src/pages/Router.tsx index c722d6b..b5d5f71 100644 --- a/src/pages/Router.tsx +++ b/src/pages/Router.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { BrowserRouter, Route, RouteComponentProps, Switch, useLocation, withRouter } from "react-router-dom"; +import { BrowserRouter, Route, Switch, useLocation } from "react-router-dom"; import { ContentWrapper } from "~/comps/layout/CotentWrapper"; import { Main } from "./main/Main"; import { Splash } from "./splash/Splash"; @@ -9,14 +9,14 @@ export const InternalAppRouter = () => { const location = useLocation(); return ( - + - + ); }; @@ -25,6 +25,5 @@ export const AppRouter = () => { - ) - -} + ); +}; diff --git a/src/pages/transition/TransitionAnimator.tsx b/src/pages/transition/TransitionAnimator.tsx index afc41ae..7e9a96e 100644 --- a/src/pages/transition/TransitionAnimator.tsx +++ b/src/pages/transition/TransitionAnimator.tsx @@ -1,34 +1,34 @@ import React from "react"; -import {Route, RouteProps, useLocation} from "react-router-dom"; -import {TransitionGroup, CSSTransition} from "react-transition-group"; +import { useLocation } from "react-router-dom"; +import { TransitionGroup, CSSTransition } from "react-transition-group"; import styles from "./TransitionAnimator.module.scss"; export type TransitionAnimatorProps = { children: React.ReactNode; -} +}; -export const TransitionAnimator = ({children}: TransitionAnimatorProps) => { +export const TransitionAnimator = ({ children }: TransitionAnimatorProps) => { const location = useLocation(); console.log(location.pathname); return ( - - - {children} - - + + + {children} + + ); -} +}; From 11aa2a72984f41ea2d85da7b2320880e750282d7 Mon Sep 17 00:00:00 2001 From: loxygenK Date: Tue, 12 Oct 2021 15:58:36 +0900 Subject: [PATCH 06/14] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Extract=20the=20clas?= =?UTF-8?q?sName?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/transition/TransitionAnimator.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/pages/transition/TransitionAnimator.tsx b/src/pages/transition/TransitionAnimator.tsx index 7e9a96e..718b034 100644 --- a/src/pages/transition/TransitionAnimator.tsx +++ b/src/pages/transition/TransitionAnimator.tsx @@ -1,9 +1,17 @@ import React from "react"; import { useLocation } from "react-router-dom"; import { TransitionGroup, CSSTransition } from "react-transition-group"; +import {CSSTransitionClassNames} from "react-transition-group/CSSTransition"; import styles from "./TransitionAnimator.module.scss"; +const transitionClassNames: CSSTransitionClassNames = { + enter: styles.pageEnter, + enterActive: styles.pageEnterActive, + exit: styles.pageExit, + exitActive: styles.pageExitActive, + }; + export type TransitionAnimatorProps = { children: React.ReactNode; }; @@ -18,12 +26,7 @@ export const TransitionAnimator = ({ children }: TransitionAnimatorProps) => { From dcdb81a1b9651e3a0421e328971ed311ea1c565f Mon Sep 17 00:00:00 2001 From: loxygenK Date: Tue, 12 Oct 2021 16:12:03 +0900 Subject: [PATCH 07/14] =?UTF-8?q?=E2=9C=A8=20Restrict=20the=20transition?= =?UTF-8?q?=20animation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/pages/{ => router}/Router.tsx | 14 ++++++++------ src/pages/router/routing.ts | 9 +++++++++ src/pages/transition/TransitionAnimator.tsx | 7 ++++--- 4 files changed, 22 insertions(+), 10 deletions(-) rename src/pages/{ => router}/Router.tsx (57%) create mode 100644 src/pages/router/routing.ts diff --git a/src/App.tsx b/src/App.tsx index 61ffc25..192cf5a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { AppRouter } from "./pages/Router"; +import { AppRouter } from "./pages/router/Router"; export const App = () => ; diff --git a/src/pages/Router.tsx b/src/pages/router/Router.tsx similarity index 57% rename from src/pages/Router.tsx rename to src/pages/router/Router.tsx index b5d5f71..fe48e3c 100644 --- a/src/pages/Router.tsx +++ b/src/pages/router/Router.tsx @@ -1,19 +1,21 @@ import React from "react"; import { BrowserRouter, Route, Switch, useLocation } from "react-router-dom"; import { ContentWrapper } from "~/comps/layout/CotentWrapper"; -import { Main } from "./main/Main"; -import { Splash } from "./splash/Splash"; -import { TransitionAnimator } from "./transition/TransitionAnimator"; +import { TransitionAnimator } from "~/pages/transition/TransitionAnimator"; +import {routingTable} from "./routing"; export const InternalAppRouter = () => { const location = useLocation(); + const enableAnimation = routingTable.find((p) => p.path == location.pathname)?.transactionAnimation ?? true; + return ( - + - - + { + routingTable.map((r, i) => ) + } diff --git a/src/pages/router/routing.ts b/src/pages/router/routing.ts new file mode 100644 index 0000000..39e78ae --- /dev/null +++ b/src/pages/router/routing.ts @@ -0,0 +1,9 @@ +import {RouteProps} from "react-router-dom" +import {Splash} from "~/pages/splash/Splash"; +import {Main} from "~/pages/main/Main"; + +export type RoutingTable = RouteProps & { transactionAnimation: boolean }; +export const routingTable: RoutingTable[] = [ + { path: "/", component: Splash, exact: true, transactionAnimation: false }, + { path: "/me", component: Main, exact: true, transactionAnimation: true }, +] diff --git a/src/pages/transition/TransitionAnimator.tsx b/src/pages/transition/TransitionAnimator.tsx index 718b034..c66ddf2 100644 --- a/src/pages/transition/TransitionAnimator.tsx +++ b/src/pages/transition/TransitionAnimator.tsx @@ -14,9 +14,10 @@ const transitionClassNames: CSSTransitionClassNames = { export type TransitionAnimatorProps = { children: React.ReactNode; + enableAnimation: boolean }; -export const TransitionAnimator = ({ children }: TransitionAnimatorProps) => { +export const TransitionAnimator = ({ children, enableAnimation }: TransitionAnimatorProps) => { const location = useLocation(); console.log(location.pathname); @@ -25,8 +26,8 @@ export const TransitionAnimator = ({ children }: TransitionAnimatorProps) => { From 325047232104fcc15cdb879377dc3e24ca572236 Mon Sep 17 00:00:00 2001 From: loxygenk Date: Tue, 12 Oct 2021 19:27:33 +0900 Subject: [PATCH 08/14] =?UTF-8?q?=F0=9F=9A=9A=20Move=20TransitionAnimator?= =?UTF-8?q?=20from=20pages/=20to=20comps/?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../style}/transition/TransitionAnimator.module.scss | 0 src/{pages => comps/style}/transition/TransitionAnimator.tsx | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/{pages => comps/style}/transition/TransitionAnimator.module.scss (100%) rename src/{pages => comps/style}/transition/TransitionAnimator.tsx (100%) diff --git a/src/pages/transition/TransitionAnimator.module.scss b/src/comps/style/transition/TransitionAnimator.module.scss similarity index 100% rename from src/pages/transition/TransitionAnimator.module.scss rename to src/comps/style/transition/TransitionAnimator.module.scss diff --git a/src/pages/transition/TransitionAnimator.tsx b/src/comps/style/transition/TransitionAnimator.tsx similarity index 100% rename from src/pages/transition/TransitionAnimator.tsx rename to src/comps/style/transition/TransitionAnimator.tsx From 5a5e2650f553780aa0ab425660945afa271cebe3 Mon Sep 17 00:00:00 2001 From: loxygenk Date: Tue, 12 Oct 2021 23:35:47 +0900 Subject: [PATCH 09/14] =?UTF-8?q?=E2=99=BB=20Swap=20ContentWrapper=20and?= =?UTF-8?q?=20TransitionAnimator?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../style/transition/TransitionAnimator.tsx | 19 +++++++++------- src/pages/router/Router.tsx | 22 ++++++++++--------- src/pages/router/routing.ts | 8 +++---- 3 files changed, 27 insertions(+), 22 deletions(-) diff --git a/src/comps/style/transition/TransitionAnimator.tsx b/src/comps/style/transition/TransitionAnimator.tsx index c66ddf2..58d9da9 100644 --- a/src/comps/style/transition/TransitionAnimator.tsx +++ b/src/comps/style/transition/TransitionAnimator.tsx @@ -1,23 +1,26 @@ import React from "react"; import { useLocation } from "react-router-dom"; import { TransitionGroup, CSSTransition } from "react-transition-group"; -import {CSSTransitionClassNames} from "react-transition-group/CSSTransition"; +import { CSSTransitionClassNames } from "react-transition-group/CSSTransition"; import styles from "./TransitionAnimator.module.scss"; const transitionClassNames: CSSTransitionClassNames = { - enter: styles.pageEnter, - enterActive: styles.pageEnterActive, - exit: styles.pageExit, - exitActive: styles.pageExitActive, - }; + enter: styles.pageEnter, + enterActive: styles.pageEnterActive, + exit: styles.pageExit, + exitActive: styles.pageExitActive, +}; export type TransitionAnimatorProps = { children: React.ReactNode; - enableAnimation: boolean + enableAnimation: boolean; }; -export const TransitionAnimator = ({ children, enableAnimation }: TransitionAnimatorProps) => { +export const TransitionAnimator = ({ + children, + enableAnimation, +}: TransitionAnimatorProps) => { const location = useLocation(); console.log(location.pathname); diff --git a/src/pages/router/Router.tsx b/src/pages/router/Router.tsx index fe48e3c..78558b3 100644 --- a/src/pages/router/Router.tsx +++ b/src/pages/router/Router.tsx @@ -1,24 +1,26 @@ import React from "react"; import { BrowserRouter, Route, Switch, useLocation } from "react-router-dom"; import { ContentWrapper } from "~/comps/layout/CotentWrapper"; -import { TransitionAnimator } from "~/pages/transition/TransitionAnimator"; -import {routingTable} from "./routing"; +import { TransitionAnimator } from "~/comps/style/transition/TransitionAnimator"; +import { routingTable } from "./routing"; export const InternalAppRouter = () => { const location = useLocation(); - const enableAnimation = routingTable.find((p) => p.path == location.pathname)?.transactionAnimation ?? true; + const enableAnimation = + routingTable.find((p) => p.path == location.pathname) + ?.transactionAnimation ?? true; return ( - - + + - { - routingTable.map((r, i) => ) - } + {routingTable.map((r, i) => ( + + ))} - - + + ); }; diff --git a/src/pages/router/routing.ts b/src/pages/router/routing.ts index 39e78ae..3b652f7 100644 --- a/src/pages/router/routing.ts +++ b/src/pages/router/routing.ts @@ -1,9 +1,9 @@ -import {RouteProps} from "react-router-dom" -import {Splash} from "~/pages/splash/Splash"; -import {Main} from "~/pages/main/Main"; +import { RouteProps } from "react-router-dom"; +import { Splash } from "~/pages/splash/Splash"; +import { Main } from "~/pages/main/Main"; export type RoutingTable = RouteProps & { transactionAnimation: boolean }; export const routingTable: RoutingTable[] = [ { path: "/", component: Splash, exact: true, transactionAnimation: false }, { path: "/me", component: Main, exact: true, transactionAnimation: true }, -] +]; From 8a1a8f1c1bf971772c7304f481e499da28876f8c Mon Sep 17 00:00:00 2001 From: loxygenk Date: Wed, 13 Oct 2021 00:39:16 +0900 Subject: [PATCH 10/14] =?UTF-8?q?=E2=AD=90=20Implement=20page=20transition?= =?UTF-8?q?=20animiation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../transition/TransitionAnimator.module.scss | 81 ++++++++++++++----- .../style/transition/TransitionAnimator.tsx | 16 ++-- 2 files changed, 71 insertions(+), 26 deletions(-) diff --git a/src/comps/style/transition/TransitionAnimator.module.scss b/src/comps/style/transition/TransitionAnimator.module.scss index 6fcdb21..7535664 100644 --- a/src/comps/style/transition/TransitionAnimator.module.scss +++ b/src/comps/style/transition/TransitionAnimator.module.scss @@ -1,29 +1,70 @@ +@use "~/styling/color.module.scss"; -.page-enter { - opacity: 0; - transform: scale(1.1); - background-color: red; - transition: opacity 300ms, transform 300ms; +%transition-base { + position: fixed; + z-index: 1; + + &:before { + transition: all 750ms; + + position: absolute; + top: 0; + left: 0; + z-index: 1; + + content: ""; + width: 170%; + height: 170%; + background-color: color.get-theme-color(background-alt); + } +} + +.transition-enter { + @extend %transition-base; + + &:before { + transition-delay: 650ms; + + transform-origin: right top; + transform: skewX(-15deg) scale(1, 1); + } } -.page-enter-active { - opacity: 1; - transform: scale(1); - transition: opacity 300ms, transform 300ms; - background-color: blue; +.transition-enter-active { + @extend %transition-base; + + &:before { + transition-delay: 650ms; + + transform-origin: right top; + transform: skewX(-15deg) scale(0, 1); + } } -.page-exit { - opacity: 1; - transform: scale(1); - transition: opacity 300ms, transform 300ms; - background-color: yellow; +.transition-exit { + @extend %transition-base; + + &:before { + transform-origin: left top; + transform: skewX(-15deg) scale(0, 1); + } } -.page-exit-active { - opacity: 0; - transform: scale(0.9); - transition: opacity 300ms, transform 300ms; - background-color: green; +.transition-exit-active { + @extend %transition-base; + + &:before { + transform-origin: left top; + transform: skewX(-15deg) scale(1, 1); + } +} + +.transition-exit-done { + @extend %transition-base; + + &:before { + transform-origin: left top; + transform: skewX(-30deg) scale(0, 1); + } } diff --git a/src/comps/style/transition/TransitionAnimator.tsx b/src/comps/style/transition/TransitionAnimator.tsx index 58d9da9..613aca1 100644 --- a/src/comps/style/transition/TransitionAnimator.tsx +++ b/src/comps/style/transition/TransitionAnimator.tsx @@ -6,10 +6,11 @@ import { CSSTransitionClassNames } from "react-transition-group/CSSTransition"; import styles from "./TransitionAnimator.module.scss"; const transitionClassNames: CSSTransitionClassNames = { - enter: styles.pageEnter, - enterActive: styles.pageEnterActive, - exit: styles.pageExit, - exitActive: styles.pageExitActive, + enter: styles.transitionEnter, + enterActive: styles.transitionEnterActive, + exit: styles.transitionExit, + exitActive: styles.transitionExitActive, + exitDone: styles.transitionExitDone }; export type TransitionAnimatorProps = { @@ -29,9 +30,12 @@ export const TransitionAnimator = ({ {children} From 0d7a417126e0eed20a2c0e381cd8de8a0cb1508d Mon Sep 17 00:00:00 2001 From: loxygenk Date: Wed, 13 Oct 2021 00:52:33 +0900 Subject: [PATCH 11/14] =?UTF-8?q?=E2=AD=90=20Delay=20logo=20animation=20fo?= =?UTF-8?q?r=20the=20page=20transition?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/comps/shared/LogoImage.module.scss | 23 +++++++++++++++-------- src/pages/main/Main.module.scss | 2 +- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/comps/shared/LogoImage.module.scss b/src/comps/shared/LogoImage.module.scss index 73dd27d..e0ad620 100644 --- a/src/comps/shared/LogoImage.module.scss +++ b/src/comps/shared/LogoImage.module.scss @@ -8,14 +8,16 @@ $pcpc-range: 10deg; width: 100%; text-align: center; - animation: 1.5s ease-out text-appear; + animation: + 1.5s 0.75s ease-out text-appear-scale, + 0.75s 0.75s ease-out text-appear-opacity; mask[id="masker"] path { stroke: rgb(255, 255, 255); stroke-dasharray: 31; stroke-dashoffset: 31; - animation: 4.5s $masking-ease anim forwards; + animation: 4.5s 0.75s $masking-ease anim forwards; } g[id="main-text"] { @@ -28,9 +30,9 @@ $pcpc-range: 10deg; transform: scale(1, 0.25); animation: - 0.8s 0.35s $catear-appear-ease forwards appear, - 0.75s 1.10s $catear-pcpc-ease forwards prepare-for-pcpc, - 1.5s 1.85s $catear-pcpc-ease alternate infinite pcpc; + 0.8s 1.35s $catear-appear-ease forwards appear, + 0.75s 2.10s $catear-pcpc-ease forwards prepare-for-pcpc, + 1.5s 2.85s $catear-pcpc-ease alternate infinite pcpc; } g[id="hover-extend"] { @@ -62,8 +64,13 @@ $pcpc-range: 10deg; to { transform: skewX(-$pcpc-range)} } - @keyframes text-appear { - from { transform: scale(1.1); opacity: 0%; } - to { transform: scale(1); opacity: 100%; } + @keyframes text-appear-scale { + from { transform: scale(1.1); } + to { transform: scale(1); } + } + + @keyframes text-appear-opacity { + from { opacity: 0%; } + to { opacity: 100%; } } } diff --git a/src/pages/main/Main.module.scss b/src/pages/main/Main.module.scss index 01a74e4..0723c5c 100644 --- a/src/pages/main/Main.module.scss +++ b/src/pages/main/Main.module.scss @@ -17,7 +17,7 @@ width: 100%; - animation: 1s 1s both appear; + animation: 1s 1.5s both appear; } .logoImage { From bd4e5d68103a6e670cc5c6f405662ba00063ad15 Mon Sep 17 00:00:00 2001 From: loxygenk Date: Wed, 13 Oct 2021 00:53:08 +0900 Subject: [PATCH 12/14] =?UTF-8?q?=F0=9F=8E=A8=20Change=20the=20color=20of?= =?UTF-8?q?=20background=20when=20the=20splash=20animation=20finishes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/splash/Splash.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/splash/Splash.module.scss b/src/pages/splash/Splash.module.scss index 3d01cff..f929c66 100644 --- a/src/pages/splash/Splash.module.scss +++ b/src/pages/splash/Splash.module.scss @@ -6,7 +6,7 @@ @include layout.extendAbsolutely; overflow: clip; - background-color: color.get-theme-color(background); + background-color: color.get-theme-color(background-alt); } .splash{ From bb5c4be2cee7ca77f15d10d07bffc29ae8fd878b Mon Sep 17 00:00:00 2001 From: loxygenk Date: Wed, 13 Oct 2021 00:55:00 +0900 Subject: [PATCH 13/14] =?UTF-8?q?=E2=99=BB=20Remove=20unneccesary=20proper?= =?UTF-8?q?ty=20field?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/comps/style/transition/TransitionAnimator.tsx | 12 ++++-------- src/pages/router/Router.tsx | 7 ++----- src/pages/router/routing.ts | 7 +++---- 3 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/comps/style/transition/TransitionAnimator.tsx b/src/comps/style/transition/TransitionAnimator.tsx index 613aca1..80901d8 100644 --- a/src/comps/style/transition/TransitionAnimator.tsx +++ b/src/comps/style/transition/TransitionAnimator.tsx @@ -15,13 +15,9 @@ const transitionClassNames: CSSTransitionClassNames = { export type TransitionAnimatorProps = { children: React.ReactNode; - enableAnimation: boolean; }; -export const TransitionAnimator = ({ - children, - enableAnimation, -}: TransitionAnimatorProps) => { +export const TransitionAnimator = ({ children }: TransitionAnimatorProps) => { const location = useLocation(); console.log(location.pathname); @@ -30,11 +26,11 @@ export const TransitionAnimator = ({ diff --git a/src/pages/router/Router.tsx b/src/pages/router/Router.tsx index 78558b3..95890ba 100644 --- a/src/pages/router/Router.tsx +++ b/src/pages/router/Router.tsx @@ -7,17 +7,14 @@ import { routingTable } from "./routing"; export const InternalAppRouter = () => { const location = useLocation(); - const enableAnimation = - routingTable.find((p) => p.path == location.pathname) - ?.transactionAnimation ?? true; - return ( - + {routingTable.map((r, i) => ( ))} +
Hello!
} /> diff --git a/src/pages/router/routing.ts b/src/pages/router/routing.ts index 3b652f7..7dbc9d0 100644 --- a/src/pages/router/routing.ts +++ b/src/pages/router/routing.ts @@ -2,8 +2,7 @@ import { RouteProps } from "react-router-dom"; import { Splash } from "~/pages/splash/Splash"; import { Main } from "~/pages/main/Main"; -export type RoutingTable = RouteProps & { transactionAnimation: boolean }; -export const routingTable: RoutingTable[] = [ - { path: "/", component: Splash, exact: true, transactionAnimation: false }, - { path: "/me", component: Main, exact: true, transactionAnimation: true }, +export const routingTable: RouteProps[] = [ + { path: "/", component: Splash, exact: true }, + { path: "/me", component: Main, exact: true }, ]; From 006aa6f515a82bd2e8b5a0665a63aaf5d63241e2 Mon Sep 17 00:00:00 2001 From: loxygenk Date: Wed, 13 Oct 2021 00:55:24 +0900 Subject: [PATCH 14/14] =?UTF-8?q?=F0=9F=9A=A8=20Run=20prettier?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/comps/style/transition/TransitionAnimator.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/comps/style/transition/TransitionAnimator.tsx b/src/comps/style/transition/TransitionAnimator.tsx index 80901d8..79f138c 100644 --- a/src/comps/style/transition/TransitionAnimator.tsx +++ b/src/comps/style/transition/TransitionAnimator.tsx @@ -10,7 +10,7 @@ const transitionClassNames: CSSTransitionClassNames = { enterActive: styles.transitionEnterActive, exit: styles.transitionExit, exitActive: styles.transitionExitActive, - exitDone: styles.transitionExitDone + exitDone: styles.transitionExitDone, }; export type TransitionAnimatorProps = { @@ -28,7 +28,7 @@ export const TransitionAnimator = ({ children }: TransitionAnimatorProps) => { key={location.pathname} timeout={{ exit: 750, - enter: 1350 + enter: 1350, }} classNames={transitionClassNames} mountOnEnter