feat(content): 让面板的展开收起按钮随面板同步进行动画

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

@@ -101,26 +101,26 @@ function CenterUtils(props) {
               <AnimatePresence>
                 {(activeIndex === 0 || activeIndex === 1) && (
                   <motion.div key="west" {...statisticAnimation}>
-                  <div className="statistic">
+                    <div className="statistic">
-                    <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>西港区</div>
+                      <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>西港区</div>
-                    <div className="info">
+                      <div className="info">
-                      <div className="value">人数：33人</div>
+                        <div className="value">人数：33人</div>
-                      <div className="value">车辆：33辆</div>
+                        <div className="value">车辆：33辆</div>
+                      </div>
                     </div>
-                  </div>
                   </motion.div>
                 )}
               </AnimatePresence>
               <AnimatePresence>
                 {(activeIndex === 2 || activeIndex === 1) && (
                   <motion.div key="east" {...statisticAnimation}>
-                  <div className="statistic">
+                    <div className="statistic">
-                    <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>东港区</div>
+                      <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>东港区</div>
-                    <div className="info">
+                      <div className="info">
-                      <div className="value">人数：33人</div>
+                        <div className="value">人数：33人</div>
-                      <div className="value">车辆：33辆</div>
+                        <div className="value">车辆：33辆</div>
+                      </div>
                     </div>
-                  </div>
                   </motion.div>
                 )}
               </AnimatePresence>

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

@@ -1,5 +1,5 @@
 import { AnimatePresence, motion } from "motion/react";
-import { useContext, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import collapseMenuImg1 from "~/assets/images/map_bi/content/collapse_menu1.png";
 import collapseMenuImg2 from "~/assets/images/map_bi/content/collapse_menu2.png";
 import collapseMenuBg1 from "~/assets/images/map_bi/content/collapse_menu_bg1.png";
@@ -49,7 +49,20 @@ function Content(props) {
     ? branchOfficeUtilsList[bottomUtilsCurrentIndex]?.type || ""
     : portUtilsList[bottomUtilsCurrentIndex]?.type || "";
   const contentKey = `${currentPort}_${currentBranchOffice}_${bottomUtilsCurrentIndex}`;
+  const pageKey = `${currentPort}_${currentBranchOffice}`;
   const isPortContent = currentPort === "00003" && !currentBranchOffice;
+  const [leftButtonKey, setLeftButtonKey] = useState(bottomUtilsCurrentIndex);
+  const [rightButtonKey, setRightButtonKey] = useState(bottomUtilsCurrentIndex);
+  const leftAnimationKey = isLeftCollapsed ? leftButtonKey : bottomUtilsCurrentIndex;
+  const rightAnimationKey = isRightCollapsed ? rightButtonKey : bottomUtilsCurrentIndex;
+
+  // 页面层级直接包含在 animation key 中；底部操作栏变化时，仅展开状态的按钮更新 key。
+  useEffect(() => {
+    if (!isLeftCollapsed)
+      setLeftButtonKey(bottomUtilsCurrentIndex);
+    if (!isRightCollapsed)
+      setRightButtonKey(bottomUtilsCurrentIndex);
+  }, [bottomUtilsCurrentIndex]);
 
   const renderPortContent = () => {
     const contentMap = {
@@ -83,9 +96,10 @@ function Content(props) {
     return Component ? <Component /> : null;
   };
 
-  const renderCollapseButton = ({ side, isCollapsed, setIsCollapsed }) => {
+  const renderCollapseButton = ({ side, isCollapsed, setIsCollapsed, animationKey }) => {
     const isPort = isPortContent;
     const collapsedX = side === "left" ? -465 : 465;
+    const hiddenX = side === "left" ? -600 : 600;
     const containerRotation = !isPort && side === "right" ? 180 : 0;
     const imageRotation = isPort
       ? (isCollapsed ? 180 : 0)
@@ -93,10 +107,22 @@ function Content(props) {
 
     return (
       <motion.div
+        key={animationKey}
         className={`collapse_menu ${isPort ? "port" : "branch_office"} ${side}`}
         style={{ backgroundImage: `url(${isPort ? collapseMenuBg1 : collapseMenuBg2})` }}
-        animate={{ x: isCollapsed ? collapsedX : 0, rotate: containerRotation }}
+        initial={{ x: hiddenX, opacity: 0, rotate: containerRotation }}
-        transition={{ duration: isCollapsed ? 0.3 : 0.5, ease: isCollapsed ? "easeIn" : "easeOut" }}
+        animate={{
+          x: isCollapsed ? collapsedX : 0,
+          opacity: 1,
+          rotate: containerRotation,
+          transition: { duration: 0.5, ease: "easeOut" },
+        }}
+        exit={{
+          x: hiddenX,
+          opacity: 0,
+          rotate: containerRotation,
+          transition: { duration: 0.3, ease: "easeIn" },
+        }}
         onClick={() => setIsCollapsed(value => !value)}
       >
         <motion.img
@@ -146,26 +172,25 @@ function Content(props) {
         )}
       </AnimatePresence>
 
-      {!pureMap && isPortContent && renderCollapseButton({
+      <AnimatePresence mode="wait">
-        side: "left",
+        {!pureMap && (isPortContent || (currentBranchOffice && (bottomUtilsCurrentType !== "camera" || isLeftCollapsed)))
-        isCollapsed: isLeftCollapsed,
+          && renderCollapseButton({
-        setIsCollapsed: setIsLeftCollapsed,
-      })}
-
-      {!pureMap && currentBranchOffice && (
-        <>
-          {bottomUtilsCurrentType !== "camera" && renderCollapseButton({
             side: "left",
             isCollapsed: isLeftCollapsed,
             setIsCollapsed: setIsLeftCollapsed,
+            animationKey: `left_${pageKey}_${leftAnimationKey}`,
           })}
-          {bottomUtilsCurrentIndex === -1 && renderCollapseButton({
+      </AnimatePresence>
+
+      <AnimatePresence mode="wait">
+        {!pureMap && currentBranchOffice && bottomUtilsCurrentIndex === -1
+          && renderCollapseButton({
             side: "right",
             isCollapsed: isRightCollapsed,
             setIsCollapsed: setIsRightCollapsed,
+            animationKey: `right_${pageKey}_${rightAnimationKey}`,
           })}
-        </>
+      </AnimatePresence>
-      )}
     </div>
   );
 }