From 943ad2fe85e31fd54c3f2fca0d1df1096b3d1a28 Mon Sep 17 00:00:00 2001
From: ittoview <ittoview@example.com>
Date: Sun, 22 Feb 2026 14:28:40 +0000
Subject: [PATCH] =?UTF-8?q?fix(=E5=8A=A8=E7=94=BB):=20=E4=BC=98=E5=8C=96IT?=
 =?UTF-8?q?TO=E6=98=BE=E7=A4=BA=E9=9A=90=E8=97=8F=E8=BF=87=E6=B8=A1?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用maxHeight+opacity替代height动画，消除滚动条跳动问题

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 src/pages/ProcessDetailPage.tsx | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/pages/ProcessDetailPage.tsx b/src/pages/ProcessDetailPage.tsx
index 913364b..242ff62 100644
--- a/src/pages/ProcessDetailPage.tsx
+++ b/src/pages/ProcessDetailPage.tsx
@@ -228,9 +228,12 @@ export function ProcessDetailPage() {
             </button>
           </div>
           <motion.div
-            animate={{ height: visible.inputs ? 'auto' : 48, opacity: 1 }}
+            animate={{
+              maxHeight: visible.inputs ? 2000 : 0,
+              opacity: visible.inputs ? 1 : 0
+            }}
             initial={false}
-            transition={{ duration: 0.25, ease: 'easeInOut' }}
+            transition={{ duration: 0.3, ease: 'easeInOut' }}
             style={{ overflow: 'hidden' }}
           >
             {visible.inputs ? (
@@ -261,9 +264,7 @@ export function ProcessDetailPage() {
                 })}
               </ul>
             ) : (
-              <div className="px-3 py-3 text-center text-xs text-gray-500 dark:text-gray-400">
-                {processDetail.inputs.length} 项已隐藏
-              </div>
+              <div className="h-0" />
             )}
           </motion.div>
         </div>
@@ -287,9 +288,12 @@ export function ProcessDetailPage() {
             </button>
           </div>
           <motion.div
-            animate={{ height: visible.tools ? 'auto' : 48, opacity: 1 }}
+            animate={{
+              maxHeight: visible.tools ? 2000 : 0,
+              opacity: visible.tools ? 1 : 0
+            }}
             initial={false}
-            transition={{ duration: 0.25, ease: 'easeInOut' }}
+            transition={{ duration: 0.3, ease: 'easeInOut' }}
             style={{ overflow: 'hidden' }}
           >
             {visible.tools ? (
@@ -320,9 +324,7 @@ export function ProcessDetailPage() {
                 })}
               </ul>
             ) : (
-              <div className="px-3 py-3 text-center text-xs text-gray-500 dark:text-gray-400">
-                {processDetail.tools.length} 项已隐藏
-              </div>
+              <div className="h-0" />
             )}
           </motion.div>
         </div>
@@ -346,9 +348,12 @@ export function ProcessDetailPage() {
             </button>
           </div>
           <motion.div
-            animate={{ height: visible.outputs ? 'auto' : 48, opacity: 1 }}
+            animate={{
+              maxHeight: visible.outputs ? 2000 : 0,
+              opacity: visible.outputs ? 1 : 0
+            }}
             initial={false}
-            transition={{ duration: 0.25, ease: 'easeInOut' }}
+            transition={{ duration: 0.3, ease: 'easeInOut' }}
             style={{ overflow: 'hidden' }}
           >
             {visible.outputs ? (
@@ -379,9 +384,7 @@ export function ProcessDetailPage() {
                 })}
               </ul>
             ) : (
-              <div className="px-3 py-3 text-center text-xs text-gray-500 dark:text-gray-400">
-                {processDetail.outputs.length} 项已隐藏
-              </div>
+              <div className="h-0" />
             )}
           </motion.div>
         </div>