perf: modify some animations to CSS animations

Signed-off-by: Innei <[email protected]>
RSSNext · Nov 15, 2024 · 9ec3fe5 · 9ec3fe5
1 parent 54ae2fe
commit 9ec3fe5
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 23 deletions.
diff --git a/apps/renderer/src/components/ui/modal/inspire/PeekModal.tsx b/apps/renderer/src/components/ui/modal/inspire/PeekModal.tsx
@@ -6,7 +6,6 @@ import { Link } from "react-router-dom"
 
 import { m } from "~/components/common/Motion"
 
-import { microReboundPreset } from "../../constants/spring"
 import { FixedModalCloseButton } from "../components/close"
 import { useCurrentModal, useModalStack } from "../stacked/hooks"
 
@@ -25,11 +24,9 @@ export const PeekModal = (
   return (
     <div className="relative mx-auto mt-[10vh] max-w-full overflow-auto px-2 scrollbar-none lg:max-w-[65rem] lg:p-0">
       <m.div
-        initial={{ opacity: 0.5, y: 50 }}
-        animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: 50 }}
-        transition={microReboundPreset}
-        className="scrollbar-none"
+        transition={{ duration: 0.2 }}
+        className="motion-preset-slide-up overflow-hidden motion-duration-200 motion-ease-spring-smooth scrollbar-none"
       >
         <InPeekModal.Provider value={true}>{children}</InPeekModal.Provider>
       </m.div>

diff --git a/apps/renderer/src/components/ui/modal/stacked/custom-modal.tsx b/apps/renderer/src/components/ui/modal/stacked/custom-modal.tsx
@@ -24,26 +24,14 @@ export const SlideUpModal: ModalTemplateType = (props) => {
       <m.div
         onPointerDown={stopPropagation}
         tabIndex={-1}
-        initial={{
-          y: "100%",
-          opacity: 0.9,
-        }}
-        animate={{
-          y: 0,
-          opacity: 1,
-        }}
         exit={{
           y: winHeight,
-        }}
-        transition={{
-          type: "spring",
-          mass: 0.4,
-          tension: 100,
-          friction: 1,
+          opacity: 0,
         }}
         className={cn(
           "relative flex flex-col items-center overflow-hidden rounded-xl border bg-theme-background p-8 pb-0",
           "aspect-[7/9] w-[600px] max-w-full shadow lg:max-h-[calc(100vh-10rem)]",
+          "motion-preset-slide-up motion-duration-200 motion-ease-spring-smooth",
           props.className,
         )}
       >

diff --git a/apps/renderer/src/modules/achievement/hooks.tsx b/apps/renderer/src/modules/achievement/hooks.tsx
@@ -14,6 +14,7 @@ export const useAchievementModal = () => {
       title: "Achievements",
       content: AchievementModalContent,
       CustomModalComponent: SlideUpModal,
+      modalContainerClassName: "overflow-hidden",
       overlay: true,
     })
   }, [present])

diff --git a/apps/renderer/src/modules/entry-column/components/mark-all-button.tsx b/apps/renderer/src/modules/entry-column/components/mark-all-button.tsx
@@ -141,13 +141,13 @@ const Popup = ({ which, containerRef, setPopoverRef, setShow, handleMarkAllAsRea
       <m.div
         ref={setPopoverRef}
         initial={{
-          y: isElectronWindows ? -95 : -70,
+          transform: `translateY(${isElectronWindows ? "-95px" : "-70px"})`,
         }}
         animate={{
-          y: isElectronWindows ? -10 : 0,
+          transform: `translateY(${isElectronWindows ? "-10px" : "0px"})`,
         }}
         exit={{
-          y: isElectronWindows ? -95 : -70,
+          transform: `translateY(${isElectronWindows ? "-95px" : "-70px"})`,
         }}
         transition={{ type: "spring", damping: 20, stiffness: 300 }}
         className="shadow-modal absolute z-50 bg-theme-modal-background-opaque shadow"

diff --git a/apps/renderer/src/modules/profile/hooks.ts b/apps/renderer/src/modules/profile/hooks.ts
@@ -67,7 +67,9 @@ export const usePresentUserProfileModal = (variant: Variant = "dialog") => {
         overlay: finalVariant === "dialog",
         autoFocus: false,
         modalContainerClassName:
-          finalVariant === "drawer" ? tw`right-4 left-[auto] safe-inset-top-4 bottom-4` : "",
+          finalVariant === "drawer"
+            ? tw`right-4 left-[auto] safe-inset-top-4 bottom-4`
+            : "overflow-hidden",
       })
     },
     [present, variant],