feat: add animation to ProfileNew component (#252)

* chore: add .vscode to .gitignore

* feat: add animation to ProfileNew component

.gitignore

@@ -5,3 +5,4 @@ dist-ssr
 *.local
 update.json
 scripts/_env.sh
+.vscode

src/components/profile/profile-new.tsx

@@ -21,6 +21,7 @@ import { Settings } from "@mui/icons-material";
 import { createProfile } from "@/services/cmds";
 import Notice from "../base/base-notice";
 import FileInput from "./file-input";
+import { Smoother } from "./smoother";
 
 interface Props {
   open: boolean;
@@ -93,6 +94,7 @@ const ProfileNew = (props: Props) => {
       <DialogTitle sx={{ pb: 0.5 }}>{t("Create Profile")}</DialogTitle>
 
       <DialogContent sx={{ width: 336, pb: 1 }}>
+        <Smoother>
           <FormControl size="small" fullWidth sx={{ mt: 2, mb: 1 }}>
             <InputLabel>Type</InputLabel>
             <Select
@@ -138,7 +140,8 @@ const ProfileNew = (props: Props) => {
             <FileInput onChange={(val) => (fileDataRef.current = val)} />
           )}
 
-        {showOpt && (
+          {form.type === "remote" && showOpt && (
+            <>
               <TextField
                 {...textFieldProps}
                 label="User Agent"
@@ -146,9 +149,6 @@ const ProfileNew = (props: Props) => {
                 value={option.user_agent}
                 onChange={(e) => setOption({ user_agent: e.target.value })}
               />
-        )}
-
-        {form.type === "remote" && showOpt && (
               <FormControlLabel
                 label={t("Use System Proxy")}
                 labelPlacement="start"
@@ -166,9 +166,6 @@ const ProfileNew = (props: Props) => {
                   />
                 }
               />
-        )}
-
-        {form.type === "remote" && showOpt && (
               <FormControlLabel
                 label={t("Use Clash Proxy")}
                 labelPlacement="start"
@@ -186,7 +183,9 @@ const ProfileNew = (props: Props) => {
                   />
                 }
               />
+            </>
           )}
+        </Smoother>
       </DialogContent>
 
       <DialogActions sx={{ px: 2, pb: 2, position: "relative" }}>

src/components/profile/smoother.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+
+export const Smoother: React.FC = ({ children }) => {
+  const self = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (typeof window.getComputedStyle == "undefined") return;
+    const element = self.current;
+    if (!element) return;
+    var height = window.getComputedStyle(element).height;
+    element.style.transition = "none";
+    element.style.height = "auto";
+    var targetHeight = window.getComputedStyle(element).height;
+    element.style.height = height;
+
+    setTimeout(() => {
+      element.style.transition = "height .5s";
+      element.style.height = targetHeight;
+    }, 0);
+  });
+  return (
+    <div
+      ref={self}
+      style={{
+        overflowY: "hidden",
+      }}
+    >
+      {children}
+    </div>
+  );
+};