✨ 优化展开动画与趋势控制布局

src/views/manage/FileManageView.vue

@@ -67,7 +67,8 @@
         </div>
       </div>
 
-      <div v-show="filterBodyVisible" class="mt-4 grid gap-4">
+      <Transition name="fcb-expand-120">
+        <div v-if="filterBodyVisible" class="fcb-expand-content mt-4 grid gap-4">
         <div class="flex flex-col gap-3 lg:flex-row lg:items-center">
           <label class="min-w-0 flex-1">
             <span class="sr-only">{{ t('fileManage.searchPlaceholder') }}</span>
@@ -253,6 +254,7 @@
           </BaseButton>
         </div>
       </div>
+      </Transition>
     </section>
 
     <section
@@ -1107,12 +1109,13 @@
             class="rounded-[30px] border px-4 py-4 shadow-md"
             :class="[isDarkMode ? 'border-gray-700 bg-gray-700/30' : 'border-gray-200 bg-white']"
           >
-            <div
-              v-for="(item, index) in visibleDetailTimeline"
-              :key="`${item.key}-${index}`"
-              class="grid grid-cols-[auto_minmax(0,1fr)] gap-3"
-            >
-              <div class="flex flex-col items-center">
+            <TransitionGroup name="fcb-expand-120" tag="div">
+              <div
+                v-for="(item, index) in visibleDetailTimeline"
+                :key="`${item.key}-${index}`"
+                class="fcb-expand-content grid grid-cols-[auto_minmax(0,1fr)] gap-3"
+              >
+                <div class="flex flex-col items-center">
                 <span
                   class="mt-1 h-3 w-3 rounded-full"
                   :class="getTimelineDotClass(item.severity)"
@@ -1141,7 +1144,8 @@
                   {{ item.displayDescription }}
                 </p>
               </div>
-            </div>
+              </div>
+            </TransitionGroup>
           </div>
         </section>
 
@@ -2197,3 +2201,43 @@ onMounted(() => {
   void loadHistoryFiles()
 })
 </script>
+
+<style scoped>
+.fcb-expand-content {
+  overflow: clip;
+  will-change: grid-template-rows, opacity, transform;
+}
+
+.fcb-expand-120-enter-active,
+.fcb-expand-120-leave-active {
+  overflow: clip;
+  transition:
+    opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    max-height 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    margin 300ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.fcb-expand-120-enter-from,
+.fcb-expand-120-leave-to {
+  max-height: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  opacity: 0;
+  transform: translateY(-0.35rem);
+}
+
+.fcb-expand-120-enter-to,
+.fcb-expand-120-leave-from {
+  max-height: 96rem;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fcb-expand-120-enter-active,
+  .fcb-expand-120-leave-active {
+    transition-duration: 1ms;
+  }
+}
+</style>