From b67cdbb18cedf57136f5f1b00e76c2090eb8aa18 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sun, 21 Dec 2025 10:27:56 +0800
Subject: [PATCH] feat(ui): add fade transition for app switching

- Add AnimatePresence + motion.div wrapper for provider list
- Use key={activeApp} to trigger enter/exit animations on app switch
- Remove redundant animate-slide-up from ProviderList to prevent
  animation conflicts and visual jitter
---
 src/App.tsx                               | 44 ++++++++++++++---------
 src/components/providers/ProviderList.tsx |  5 +--
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6572f0756..a73fa88ff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { motion, AnimatePresence } from "framer-motion";
 import { toast } from "sonner";
 import { invoke } from "@tauri-apps/api/core";
 import { useQueryClient } from "@tanstack/react-query";
@@ -334,23 +335,32 @@ function App() {
           <div className="mx-auto max-w-[56rem] px-5 flex flex-col h-[calc(100vh-8rem)] overflow-hidden">
             {/* 独立滚动容器 - 解决 Linux/Ubuntu 下 DndContext 与滚轮事件冲突 */}
             <div className="flex-1 overflow-y-auto overflow-x-hidden pb-12 px-1">
-              <div className="space-y-4">
-                <ProviderList
-                  providers={providers}
-                  currentProviderId={currentProviderId}
-                  appId={activeApp}
-                  isLoading={isLoading}
-                  isProxyRunning={isProxyRunning}
-                  isProxyTakeover={isProxyRunning && isCurrentAppTakeoverActive}
-                  onSwitch={switchProvider}
-                  onEdit={setEditingProvider}
-                  onDelete={setConfirmDelete}
-                  onDuplicate={handleDuplicateProvider}
-                  onConfigureUsage={setUsageProvider}
-                  onOpenWebsite={handleOpenWebsite}
-                  onCreate={() => setIsAddOpen(true)}
-                />
-              </div>
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={activeApp}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.15 }}
+                  className="space-y-4"
+                >
+                  <ProviderList
+                    providers={providers}
+                    currentProviderId={currentProviderId}
+                    appId={activeApp}
+                    isLoading={isLoading}
+                    isProxyRunning={isProxyRunning}
+                    isProxyTakeover={isProxyRunning && isCurrentAppTakeoverActive}
+                    onSwitch={switchProvider}
+                    onEdit={setEditingProvider}
+                    onDelete={setConfirmDelete}
+                    onDuplicate={handleDuplicateProvider}
+                    onConfigureUsage={setUsageProvider}
+                    onOpenWebsite={handleOpenWebsite}
+                    onCreate={() => setIsAddOpen(true)}
+                  />
+                </motion.div>
+              </AnimatePresence>
             </div>
           </div>
         );
diff --git a/src/components/providers/ProviderList.tsx b/src/components/providers/ProviderList.tsx
index 748c8a930..f99579130 100644
--- a/src/components/providers/ProviderList.tsx
+++ b/src/components/providers/ProviderList.tsx
@@ -83,10 +83,7 @@ export function ProviderList({
         items={sortedProviders.map((provider) => provider.id)}
         strategy={verticalListSortingStrategy}
       >
-        <div
-          className="space-y-3 animate-slide-up"
-          style={{ animationDelay: "0.1s" }}
-        >
+        <div className="space-y-3">
           {sortedProviders.map((provider) => (
             <SortableProviderCard
               key={provider.id}