feat(ui): add fade transition for view and panel switching

Add smooth fade animations when navigating between views (Settings,
MCP, Skills, Prompts) and opening full-screen panels (Add/Edit Provider).
This commit is contained in:
Jason
2025-12-21 16:05:22 +08:00
parent d303706d51
commit 26c3f05daf
2 changed files with 91 additions and 73 deletions
+6 -2
View File
@@ -1,5 +1,6 @@
import React from "react";
import { createPortal } from "react-dom";
import { motion } from "framer-motion";
import { ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
@@ -35,7 +36,10 @@ export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
if (!isOpen) return null;
return createPortal(
<div
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.2 }}
className="fixed inset-0 z-[60] flex flex-col"
style={{ backgroundColor: "hsl(var(--background))" }}
>
@@ -71,7 +75,7 @@ export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
</div>
</div>
)}
</div>,
</motion.div>,
document.body,
);
};