diff --git a/src/pages/Container/Map/components/BottomUtils/useBranchOfficeUtilsAnimation.js b/src/pages/Container/Map/components/BottomUtils/useBranchOfficeUtilsAnimation.js
index 48f94b5..4baa324 100644
--- a/src/pages/Container/Map/components/BottomUtils/useBranchOfficeUtilsAnimation.js
+++ b/src/pages/Container/Map/components/BottomUtils/useBranchOfficeUtilsAnimation.js
@@ -1,60 +1,75 @@
/**
- * BottomUtils 子项动画 Hook
+ * BottomUtils 子项动画 Hook（分公司工具栏）
*
* 功能说明：
- * 1. 为子项列表提供从下向上进入、从上向下离开的动画效果
- * 2. 子项依次出现的波浪式动画（stagger 效果）
- * 3. 离开时反向依次消失
+ * 1. 为底部工具栏子项列表提供从下向上进入、从上向下离开的动画效果
+ * 2. 实现子项依次出现的波浪式动画（stagger 效果）
+ * 3. 离开时反向依次消失，营造流畅的视觉体验
*
- * 动画效果：
- * - 进入动画：每个子项从下方 50px 处滑入，同时淡入（y: 50 → 0, opacity: 0 → 1）
- * - 离开动画：每个子项向下方 50px 处滑出，同时淡出（y: 0 → 50, opacity: 1 → 0）
+ * 动画参数配置：
+ * - 容器进入动画：y: 200 → 0（从下向上滑入），opacity: 0 → 1（淡入）
+ * 时长：0.3s，缓动：easeOut（先快后慢），stagger 间隔：0.05s（正向）
+ * - 容器离开动画：y: 0 → 200（从上向下滑出），opacity: 1 → 0（淡出）
+ * 时长：0.2s，缓动：easeIn（先慢后快），stagger 间隔：0.03s（反向，更快）
+ * - 子项进入动画：y: 50 → 0，opacity: 0 → 1，时长：0.3s
+ * - 子项离开动画：y: 0 → 50，opacity: 1 → 0，跟随容器 stagger
*
- * Stagger 效果：
+ * Stagger 波浪效果说明：
* - 进入时（visible）：子项从第一个到最后一个依次出现，每个间隔 0.05 秒
- * - 离开时（hidden）：子项从最后一个到第一个依次消失，每个间隔 0.03 秒（更快）
+ * - 离开时（hidden）：子项从最后一个到第一个依次消失，每个间隔 0.03 秒（更快，感觉更敏捷）
*
* 使用方法：
* 1. 在父组件中使用 AnimatePresence 包裹子项容器
* 2. 在子项容器上设置 initial="hidden"、animate="visible"、exit="hidden"
- * 3. 在子项容器上使用 containerVariants
- * 4. 在每个子项上使用 itemVariants
+ * 3. 在子项容器上使用 variants={containerVariants}
+ * 4. 在每个子项上使用 variants={itemVariants}
*
* @returns {object} 返回包含以下属性的对象：
- * - containerVariants: 容器的动画变体（用于 motion.div）
- * - itemVariants: 子项的动画变体（用于每个子项）
+ * - containerVariants: 容器的动画变体，用于 motion.div 的 variants 属性
+ * - itemVariants: 子项的动画变体，用于每个子项 motion.div 的 variants 属性
*/
export function useBranchOfficeUtilsAnimation() {
// ==================== 容器动画变体 ====================
- // 作用：控制整个子项容器的动画和子项的 stagger 效果
+ //
+ // 容器动画说明：
+ // - 控制整个子项容器的进入和离开动画
+ // - 通过 staggerChildren 实现子项的波浪式出现/消失效果
+ // - staggerDirection 控制子项的出现顺序（1=正向，-1=反向）
+ // ====================
+
const containerVariants = {
- // 隐藏状态
- // - 用途 1：作为初始状态（initial="hidden"）
- // - 用途 2：作为离开状态（exit="hidden"）
- // - 当同时定义 hidden.transition 和 visible.transition 时
- // Framer Motion 会根据当前是进入还是离开自动选择对应的 transition
+ // ----- 隐藏状态 -----
+ // 用途：
+ // 1. 作为初始状态（initial="hidden"）
+ // 2. 作为离开状态（exit="hidden"）
+ // 注意：当同时定义 hidden.transition 和 visible.transition 时
+ // Framer Motion 会根据当前是进入还是离开自动选择对应的 transition
hidden: {
opacity: 0, // 容器整体透明
y: 200, // 容器从下方 200px 处开始/离开到下方 200px
+
// 离开时的 transition 配置（当 exit="hidden" 时使用）
// 进入时会使用 visible.transition，所以这里只配置离开相关的参数
transition: {
- duration: 0.2, // 容器离开动画时长：0.2 秒（比进入快）
- ease: "easeIn", // 容器离开缓动函数
+ duration: 0.2, // 容器离开动画时长：0.2 秒（比进入快，显得更敏捷）
+ ease: "easeIn", // 容器离开缓动函数：先慢后快，快速消失
+
// 子项依次离开的反向波浪效果
staggerChildren: 0.03, // 离开时间隔更短（0.03 秒），显得更轻快
staggerDirection: -1, // -1 = 反向（从最后一个到第一个）
},
},
- // 可见状态（进入动画）
- // - 当组件挂载后立即使用（animate="visible"）
+ // ----- 可见状态（进入动画）-----
+ // 用途：当组件挂载后立即使用（animate="visible"）
visible: {
opacity: 1, // 容器整体不透明
y: 0, // 容器移动到正常位置
+
transition: {
duration: 0.3, // 容器动画时长：0.3 秒
- ease: "easeOut", // 容器缓动函数
+ ease: "easeOut", // 容器缓动函数：先快后慢，营造舒适的进入体验
+
// 子项依次出现的波浪效果（进入时使用）
staggerChildren: 0.05, // 每个子项间隔 0.05 秒依次出现
staggerDirection: 1, // 1 = 正向（从第一个到最后一个）
@@ -63,30 +78,37 @@ export function useBranchOfficeUtilsAnimation() {
};
// ==================== 子项动画变体 ====================
- // 作用：控制单个子项的进入和离开动画
+ //
+ // 子项动画说明：
+ // - 控制单个子项的进入和离开动画
+ // - 子项动画由容器的 staggerChildren 控制执行时机
+ // - 每个子项独立执行相同的动画，但时间上有间隔
+ // ====================
+
const itemVariants = {
- // 隐藏状态
- // - 作为初始状态（initial="hidden"）
- // - 作为离开的目标状态（exit="hidden" 时子项会动画到此状态）
+ // ----- 隐藏状态 -----
+ // 用途：
+ // 1. 作为初始状态（initial="hidden"）
+ // 2. 作为离开的目标状态（exit="hidden" 时子项会动画到此状态）
hidden: {
y: 50, // Y 轴位置：从下方 50px 处开始/离开到下方 50px
opacity: 0, // 透明度：完全透明
},
- // 可见状态
- // - 作为进入的目标状态（animate="visible" 时子项会动画到此状态）
+ // ----- 可见状态 -----
+ // 用途：作为进入的目标状态（animate="visible" 时子项会动画到此状态）
visible: {
y: 0, // Y 轴位置：移动到正常位置
opacity: 1, // 透明度：变为完全不透明
+
transition: {
duration: 0.3, // 动画时长：0.3 秒
- ease: "easeOut", // 缓动函数：快速开始，缓慢结束
+ ease: "easeOut", // 缓动函数：快速开始，缓慢结束，更自然
},
},
};
// ==================== 返回值 ====================
- // 返回容器和子项的动画变体
return {
containerVariants, // 容器的动画变体，用于 motion.div 的 variants 属性
itemVariants, // 子项的动画变体，用于每个子项 motion.div 的 variants 属性
diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js
index 283bea1..82cce10 100644
--- a/src/pages/Container/Map/components/Content/index.js
+++ b/src/pages/Container/Map/components/Content/index.js
@@ -46,6 +46,7 @@ function Content(props) {
isVisible: isLeftVisible,
isCollapsed: isLeftCollapsed,
handleCollapse: handleLeftCollapse,
+ menuControls: leftMenuControls,
} = useContentAnimation({
currentContent: { currentPort, currentBranchOffice, bottomUtilsCurrentIndex },
side: "left",
@@ -59,6 +60,7 @@ function Content(props) {
isVisible: isRightVisible,
isCollapsed: isRightCollapsed,
handleCollapse: handleRightCollapse,
+ menuControls: rightMenuControls,
} = useContentAnimation({
currentContent: { currentBranchOffice, bottomUtilsCurrentIndex },
side: "right",
@@ -159,13 +161,25 @@ function Content(props) {
if (currentPort === "00003" && !currentBranchOffice) {
return (
- handleLeftCollapse()}
+ animate={leftMenuControls}
+ onClick={handleLeftCollapse}
+ initial={{ x: 0 }}
>
-
-
handleLeftCollapse()}
+ animate={leftMenuControls}
+ onClick={handleLeftCollapse}
+ initial={{ x: 0 }}
>
-
-
handleRightCollapse()}
+ animate={rightMenuControls}
+ onClick={handleRightCollapse}
+ initial={{ x: 0, rotate: 180 }}
>
-
-