From eb28ec866ae64ccfbf03af7bd3a5761c69980d6b Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Sat, 29 Oct 2022 23:36:10 +0800
Subject: [PATCH] feat: add animation

---
 src/components/profile/info-editor.tsx | 33 +++++++++++++-------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/profile/info-editor.tsx b/src/components/profile/info-editor.tsx
index 941dc62..4044dba 100644
--- a/src/components/profile/info-editor.tsx
+++ b/src/components/profile/info-editor.tsx
@@ -4,6 +4,7 @@ import { useLockFn, useSetState } from "ahooks";
 import { useTranslation } from "react-i18next";
 import {
   Button,
+  Collapse,
   Dialog,
   DialogActions,
   DialogContent,
@@ -121,18 +122,7 @@ const InfoEditor = (props: Props) => {
           />
         )}
 
-        {showOpt && (
-          <TextField
-            {...textFieldProps}
-            label="User Agent"
-            value={option.user_agent}
-            placeholder={`clash-verge/v${version}`}
-            onChange={(e) => setOption({ user_agent: e.target.value })}
-            onKeyDown={(e) => e.key === "Enter" && onUpdate()}
-          />
-        )}
-
-        {((type === "remote" && showOpt) || type === "local") && (
+        {(type === "remote" || type === "local") && (
           <TextField
             {...textFieldProps}
             label={t("Update Interval(mins)")}
@@ -145,7 +135,20 @@ const InfoEditor = (props: Props) => {
           />
         )}
 
-        {form.type === "remote" && showOpt && (
+        <Collapse
+          in={type === "remote" && showOpt}
+          timeout="auto"
+          unmountOnExit
+        >
+          <TextField
+            {...textFieldProps}
+            label="User Agent"
+            value={option.user_agent}
+            placeholder={`clash-verge/v${version}`}
+            onChange={(e) => setOption({ user_agent: e.target.value })}
+            onKeyDown={(e) => e.key === "Enter" && onUpdate()}
+          />
+
           <FormControlLabel
             label={t("Use System Proxy")}
             labelPlacement="start"
@@ -163,9 +166,7 @@ const InfoEditor = (props: Props) => {
               />
             }
           />
-        )}
 
-        {form.type === "remote" && showOpt && (
           <FormControlLabel
             label={t("Use Clash Proxy")}
             labelPlacement="start"
@@ -183,7 +184,7 @@ const InfoEditor = (props: Props) => {
               />
             }
           />
-        )}
+        </Collapse>
       </DialogContent>
 
       <DialogActions sx={{ px: 2, pb: 2, position: "relative" }}>