地图

src/pages/Container/Map/components/Content/index.js

@@ -132,6 +132,7 @@ function Content(props) {
         )}
         {isLeftVisible && (
           <motion.div
+            initial={{ x: -300, opacity: 0 }}
             animate={leftControls}
             className={`map_content_container__content ${(!leftDisplayedContent.currentPort || (leftDisplayedContent.currentPort === "00003" && !leftDisplayedContent.currentBranchOffice)) ? "port" : "branch_office"}`}
             style={{ left: 35 }}
@@ -142,6 +143,7 @@ function Content(props) {
         )}
         {isRightVisible && (
           <motion.div
+            initial={{ x: 300, opacity: 0 }}
             animate={rightControls}
             className={`map_content_container__content ${(!leftDisplayedContent.currentPort || (leftDisplayedContent.currentPort === "00003" && !leftDisplayedContent.currentBranchOffice)) ? "port" : "branch_office"}`}
             style={{ right: 35 }}

src/pages/Container/Map/components/Content/useContentAnimation.js

@@ -145,6 +145,9 @@ export function useContentAnimation({
 
   // ==================== 折叠/展开处理 ====================
 
+  // 标记是否正在手动处理折叠/展开（防止 useEffect 干预）
+  const isManualCollapseAnimating = useRef(false);
+
   /**
    * 处理折叠按钮点击事件
    * @param {Function} setCollapseState - setState 函数，用于更新折叠状态
@@ -155,23 +158,22 @@ export function useContentAnimation({
       // 1. 先同步显示内容（确保显示最新的内容）
       setDisplayedContent(currentContent);
 
-      // 2. 显示元素
+      // 2. 更新折叠状态
-      setIsVisible(true);
-
-      // 3. 更新折叠状态
       setCollapseState(false);
 
-      // 4. 执行进入动画
+      // 3. 显示元素
-      // 使用 requestAnimationFrame 确保 DOM 更新后再设置初始状态
+      setIsVisible(true);
+
+      // 4. 使用双重 requestAnimationFrame 确保 DOM 已挂载且 motion 控制器已准备好
       requestAnimationFrame(() => {
-        // 设置元素到初始隐藏位置（侧边外部）
+        // 先设置到初始隐藏位置
         controls.set({
           x: getInitialX(),
           opacity: 0,
         });
 
-        // 然后触发进入动画（从侧边滑入）
         requestAnimationFrame(() => {
+          // 然后执行进入动画
           controls.start({
             x: 0, // 移动到正常位置
             opacity: 1, // 淡入
@@ -182,6 +184,9 @@ export function useContentAnimation({
     }
     else {
       // ==================== 折叠逻辑 ====================
+      // 标记开始手动处理折叠/展开动画（阻止 useEffect 干预）
+      isManualCollapseAnimating.current = true;
+
       // 执行离开动画（滑到侧边并淡出）
       controls.start({
         x: getInitialX(), // 移动到侧边外部
@@ -194,6 +199,9 @@ export function useContentAnimation({
 
         // 2. 更新折叠状态为 true
         setCollapseState(true);
+
+        // 3. 清除手动处理标记
+        isManualCollapseAnimating.current = false;
       });
     }
   };
@@ -206,6 +214,11 @@ export function useContentAnimation({
       return;
     }
 
+    // 如果正在手动处理折叠/展开动画，不执行 useEffect 逻辑
+    if (isManualCollapseAnimating.current) {
+      return;
+    }
+
     // ==================== 场景 1：纯地图模式（最高优先级）====================
     if (isPureMap) {
       // 如果元素当前可见，执行离开动画并隐藏
@@ -301,8 +314,9 @@ export function useContentAnimation({
       });
     }
 
-    // ----- 情况 C：从隐藏状态切换回来（退出纯地图模式或展开）-----
+    // ----- 情况 C：从隐藏状态切换回来（退出纯地图模式）-----
-    else if (!isVisible) {
+    // 注意：展开操作由 handleCollapse 处理，不在这里处理
+    else if (!isVisible && !isCollapsed) {
       // 1. 显示元素
       setIsVisible(true);