update

src/pages/home/index.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { animated, useSpring } from "@react-spring/web";
 
 export default function Home() {
   let [hiddenDrawer, setHiddenDrawer] = useState(true);
@@ -70,27 +71,31 @@ function FileButton(props: { openLogin: () => void }) {
 }
 
 function Drawer(props: { hidden: boolean; setHidden: () => void }) {
-  return props.hidden ? (
-    <></>
-  ) : (
-    <div className={"absolute right-0 z-0 h-screen w-screen transition-all"}>
-      <div
-        className={"absolute z-40 h-screen w-screen bg-gray-400 opacity-60"}
-        onClick={() => {
-          console.log("hidden");
-          props.setHidden();
-        }}
-      ></div>
-      <div
-        className={
-          "absolute right-0 z-50 h-screen w-1/3 origin-right animate-fade-in-down bg-base-100"
-        }
-      >
-        <div className={"container mt-20 flex items-center justify-center"}>
-          <LoginContent />
+  const styles = useSpring({
+    opacity: !props.hidden ? 1 : 0,
+    visibility: !props.hidden ? "visible" : "hidden",
+  });
+
+  return (
+    <animated.div style={styles}>
+      <div className={"absolute right-0 z-0 h-screen w-screen"}>
+        <div
+          className={"absolute z-40 h-screen w-screen bg-gray-400 opacity-60"}
+          onClick={() => {
+            props.setHidden();
+          }}
+        ></div>
+        <div
+          className={
+            "absolute right-0 z-50 h-screen w-1/3 origin-right bg-base-100"
+          }
+        >
+          <div className={"container mt-20 flex items-center justify-center"}>
+            <LoginContent />
+          </div>
         </div>
       </div>
-    </div>
+    </animated.div>
   );
 }