From 8c14106a10aa7c8fa34792975314e7efa22386d3 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Mon, 31 Jan 2022 13:35:22 -0800
Subject: [PATCH] nice switch transition

---
 packages/web/pages/s/index.tsx  | 12 ++++++++----
 packages/web/styles/globals.css |  5 ++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/web/pages/s/index.tsx b/packages/web/pages/s/index.tsx
index fd77b1d..b72395e 100644
--- a/packages/web/pages/s/index.tsx
+++ b/packages/web/pages/s/index.tsx
@@ -9,7 +9,11 @@ import Header from "../../components/v2/Header";
 import Later from "../../components/v2/Later";
 import Sidebar from "../../components/v2/Sidebar";
 import { currPagePath } from "../../recoil/main";
-import { CSSTransition, TransitionGroup } from "react-transition-group";
+import {
+  CSSTransition,
+  TransitionGroup,
+  SwitchTransition,
+} from "react-transition-group";
 
 export default function Me() {
   // figure out what content to render from here
@@ -51,18 +55,18 @@ export default function Me() {
       <div className="flex-1 flex flex-row items-stretch">
         <Sidebar />
 
-        <TransitionGroup>
+        <SwitchTransition>
           <CSSTransition
             appear={true}
             key={Math.random()}
-            timeout={1200}
+            timeout={400}
             classNames="slide"
           >
             <div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
               {getCurrentContent()}
             </div>
           </CSSTransition>
-        </TransitionGroup>
+        </SwitchTransition>
       </div>
     </div>
   );
diff --git a/packages/web/styles/globals.css b/packages/web/styles/globals.css
index 377ac38..4fffc44 100644
--- a/packages/web/styles/globals.css
+++ b/packages/web/styles/globals.css
@@ -194,8 +194,7 @@ li.slick-active button {
 .slide-enter.slide-enter-active {
   opacity: 1;
   transform: scale(1) translateY(0);
-  transition: opacity 500ms linear 500ms, transform 500ms ease-in-out 500ms;
-  transition-delay: 500ms;
+  transition: opacity 200ms linear 100ms, transform 200ms ease-in-out 100ms;
 }
 
 /* slide exit */
@@ -206,7 +205,7 @@ li.slick-active button {
 .slide-exit.slide-exit-active {
   opacity: 0;
   transform: scale(0.97) translateY(5px);
-  transition: opacity 200ms linear, transform 200ms ease-out;
+  transition: opacity 100ms linear, transform 100ms ease-out;
 }
 .slide-exit-done {
   opacity: 0;