nice switch transition

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>
   );

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;