打磨细节

components/ProductMenu.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Image from 'next/image';
+import { useState, useEffect } from 'react';
 
 interface ProductMenuProps {
   isOpen: boolean;
@@ -9,7 +10,26 @@ interface ProductMenuProps {
 }
 
 export default function ProductMenu({ isOpen, onClose, language }: ProductMenuProps) {
-  if (!isOpen) return null;
+  const [isVisible, setIsVisible] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsVisible(true);
+      setIsClosing(false);
+    } else if (isVisible) {
+      // 触发退出动画
+      setIsClosing(true);
+      // 动画结束后隐藏组件
+      const timer = setTimeout(() => {
+        setIsVisible(false);
+        setIsClosing(false);
+      }, 300); // 匹配动画时长
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, isVisible]);
+
+  if (!isVisible) return null;
 
   const content = {
     zh: {
@@ -68,12 +88,12 @@ export default function ProductMenu({ isOpen, onClose, language }: ProductMenuPr
     <>
       {/* Backdrop */}
       <div
-        className="fixed inset-0 bg-black/20 z-40 animate-fade-in"
+        className={`fixed inset-0 bg-black/20 z-40 ${isClosing ? 'animate-fade-out-fast' : 'animate-fade-in'}`}
         onClick={onClose}
       />
 
       {/* Menu */}
-      <div className="fixed left-1/2 -translate-x-1/2 bg-white rounded-2xl shadow-xl border border-[#e5e7eb] p-6 z-50 animate-slide-down"
+      <div className={`fixed left-1/2 -translate-x-1/2 bg-white rounded-2xl shadow-xl border border-[#e5e7eb] p-6 z-50 ${isClosing ? 'animate-slide-up' : 'animate-slide-down'}`}
         style={{ width: '1080px', top: '90px' }}
       >
       <div className="flex flex-row gap-8">