feat: change screen animations easing

Quiddlee · Dec 23, 2023 · c1bd839 · c1bd839
1 parent e8795f0
commit c1bd839
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 14 deletions.
diff --git a/src/components/RequestEditor/RequestEditor.tsx b/src/components/RequestEditor/RequestEditor.tsx
@@ -14,7 +14,7 @@ const RequestEditor: FC<HTMLAttributes<HTMLElement>> = ({ children, ...props })
       {...props}
       data-testid="editor-request"
       className={cn(
-        'animation-delay-200 relative flex h-full w-full origin-top animate-fade-in-screen gap-4 overflow-y-hidden rounded-4xl bg-surface-container pl-6 transition-all duration-500 ease-emphasized-decelerate',
+        'animation-delay-200 transition-enter-screen relative flex h-full w-full origin-top animate-fade-in-screen gap-4 overflow-y-hidden rounded-4xl bg-surface-container pl-6',
       )}
     >
       <Editor className="pr-20" editorState={editorState} onChange={setEditorState} />

diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
@@ -85,20 +85,19 @@ const MainPage = () => {
       >
         <Controls onResponseOpen={handleExpand} />
       </RequestEditorResized>
-      <section className={cn('relative flex h-full w-full justify-end')}>
+      <section className="relative flex h-full w-full justify-end">
         <ResizeBar direction="horizontal" className="absolute -left-4" onMouseDown={handleResize} />
         <div
           style={{
             width: `${width}px`,
             transform: `scale3d(${interpolateResponse}, ${interpolateResponse}, 1)`,
             opacity: oneZeroResponse,
           }}
-          className={cn(
-            'animation-delay-600 relative h-full w-full origin-bottom-right animate-fade-in-screen transition-all duration-500 ease-emphasized-decelerate',
-            {
-              'transition-none': isResized.current,
-            },
-          )}
+          className={cn('animation-delay-600 relative h-full w-full origin-bottom-right animate-fade-in-screen', {
+            'transition-enter-screen': !isResponseHidden,
+            'transition-exit-screen': isResponseHidden,
+            'transition-none': isResized.current,
+          })}
         >
           <ResponseViewer onResponseClose={handleExpand} isHidden={isResponseHidden} />
         </div>

diff --git a/src/pages/MainPage/ui/RequestEditorResized.tsx b/src/pages/MainPage/ui/RequestEditorResized.tsx
@@ -82,12 +82,11 @@ const RequestEditorResized: FC<HTMLAttributes<HTMLDivElement>> = ({ className, c
         style={{
           height: `${height}px`,
         }}
-        className={cn(
-          'animation-delay-400 relative h-full w-full origin-bottom-left animate-fade-in-screen transition-all duration-500 ease-emphasized-decelerate',
-          {
-            'transition-none': isResized.current,
-          },
-        )}
+        className={cn('animation-delay-400 relative h-full w-full origin-bottom-left animate-fade-in-screen', {
+          'transition-enter-screen': !isCollapsed,
+          'transition-exit-screen': isCollapsed,
+          'transition-none': isResized.current,
+        })}
       >
         <ResizeBar className="absolute -top-4 h-4" onMouseDown={handleResize} />
         <EditorTools isExpanded={isExpanded} onExpand={handleExpand}>

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -61,6 +61,16 @@
   }
 }
 
+@layer components {
+  .transition-enter-screen {
+    @apply transition-all duration-500 ease-emphasized-decelerate;
+  }
+
+  .transition-exit-screen {
+    @apply transition-all duration-400 ease-emphasized-decelerate;
+  }
+}
+
 .os-scrollbar-handle {
   background-color: var(--md-sys-color-primary) !important;
   cursor: grab;