地图部分元素添加过渡动画

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

@@ -1,4 +1,5 @@
 import { useContext, useEffect, useState } from "react";
+import { CSSTransition } from "react-transition-group";
 import bg7 from "~/assets/images/map_bi/bottom_utils/bg7.png";
 import bg8 from "~/assets/images/map_bi/bottom_utils/bg8.png";
 import titleImg from "~/assets/images/map_bi/bottom_utils/title.png";
@@ -91,7 +92,17 @@ function BottomUtils(props) {
               onClick={() => optionsClick(index)}
             >
               <div className="label">{item.label}</div>
-              {(isCurrentActive && item.list?.length > 0) && (
+              <CSSTransition
+                timeout={500}
+                classNames={{
+                  enter: "animate__animated animate__faster",
+                  enterActive: "animate__animated animate__faster animate__fadeInUp",
+                  exit: "animate__animated animate__faster",
+                  exitActive: "animate__animated animate__faster animate__fadeOutDown",
+                }}
+                unmountOnExit
+                in={(isCurrentActive && item.list?.length > 0)}
+              >
                 <div className="items">
                   {item.list?.map((item1, index1) => (
                     <div
@@ -106,7 +117,7 @@ function BottomUtils(props) {
                     </div>
                   ))}
                 </div>
-              )}
+              </CSSTransition>
             </div>
           );
         })}

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

@@ -1,4 +1,5 @@
 import { useContext, useState } from "react";
+import { CSSTransition } from "react-transition-group";
 import statisticsTitleImg from "~/assets/images/map_bi/center_utils/statistics_title.png";
 import guangImg from "~/assets/images/map_bi/center_utils/tabguang.png";
 import tabLeftImg from "~/assets/images/map_bi/center_utils/tableft.png";
@@ -27,6 +28,8 @@ function CenterUtils(props) {
   const [activeIndex, setActiveIndex] = useState(1);
 
   const onChangeArea = (index) => {
+    if (index === activeIndex)
+      return;
     setActiveIndex(index);
     props.setArea(list[index].area);
     mapMethods.current.removeBranchOfficePoint();
@@ -38,7 +41,17 @@ function CenterUtils(props) {
 
   return (
     <div className="map_content_center_options_container">
-      {(currentPort === "00003" && !currentBranchOffice && !pureMap) && (
+      <CSSTransition
+        timeout={1000}
+        classNames={{
+          enter: "animate__animated",
+          enterActive: "animate__animated animate__bounceInDown",
+          exit: "animate__animated",
+          exitActive: "animate__animated animate__bounceOutUp",
+        }}
+        unmountOnExit
+        in={(currentPort === "00003" && !currentBranchOffice && !pureMap)}
+      >
         <div>
           <div className="center_options">
             <div
@@ -61,7 +74,17 @@ function CenterUtils(props) {
             ))}
           </div>
           <div className="statistics">
-            {(activeIndex === 0 || activeIndex === 1) && (
+            <CSSTransition
+              timeout={1000}
+              classNames={{
+                enter: "animate__animated",
+                enterActive: "animate__animated animate__bounceIn",
+                exit: "animate__animated",
+                exitActive: "animate__animated animate__bounceOut",
+              }}
+              unmountOnExit
+              in={(activeIndex === 0 || activeIndex === 1)}
+            >
               <div className="statistic">
                 <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>西港区</div>
                 <div className="info">
@@ -69,8 +92,18 @@ function CenterUtils(props) {
                   <div className="value">车辆：33辆</div>
                 </div>
               </div>
-            )}
+            </CSSTransition>
-            {(activeIndex === 2 || activeIndex === 1) && (
+            <CSSTransition
+              timeout={1000}
+              classNames={{
+                enter: "animate__animated",
+                enterActive: "animate__animated animate__bounceIn",
+                exit: "animate__animated",
+                exitActive: "animate__animated animate__bounceOut",
+              }}
+              unmountOnExit
+              in={(activeIndex === 2 || activeIndex === 1)}
+            >
               <div className="statistic">
                 <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>东港区</div>
                 <div className="info">
@@ -78,10 +111,10 @@ function CenterUtils(props) {
                   <div className="value">车辆：33辆</div>
                 </div>
               </div>
-            )}
+            </CSSTransition>
           </div>
         </div>
-      )}
+      </CSSTransition>
     </div>
   );
 }

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

@@ -1,4 +1,5 @@
-import { useContext } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
+import { CSSTransition } from "react-transition-group";
 import backImg1 from "~/assets/images/map_bi/back1.png";
 import backImg2 from "~/assets/images/map_bi/back2.png";
 import guangImg from "~/assets/images/map_bi/guang.png";
@@ -17,9 +18,26 @@ import {
 } from "~/pages/Container/Map/js/mittKey";
 import "./index.less";
 
+const animationTime = 1000;
 function Header(props) {
   const { currentPort, currentBranchOffice, mapMethods, area } = useContext(Context);
 
+  const [animationShow, setAnimationShow] = useState(false);
+  const [displayTitle, setDisplayTitle] = useState(props.headerTitle);
+  const timer = useRef(null);
+
+  useEffect(() => {
+    setAnimationShow(false);
+    timer.current = setTimeout(() => {
+      setDisplayTitle(props.headerTitle);
+      setAnimationShow(true);
+    }, animationTime);
+
+    return () => {
+      timer.current && clearTimeout(timer.current);
+    };
+  }, [props.headerTitle]);
+
   const onBack = () => {
     sessionStorage.removeItem("mapCurrentBranchOfficeId");
     mitt.emit(deletePeoplePositionPointMittKey);
@@ -38,9 +56,9 @@ function Header(props) {
       mapMethods.current.removeBranchOfficePoint();
       mapMethods.current.removeMarkPoint();
       mapMethods.current.returnPreviousCenterPoint();
-      setTimeout(() => {
+      // setTimeout(() => {
       mapMethods.current.addBranchOfficePoint(area);
-      }, 2000);
+      // }, 2000);
     }
     else if (currentPort) {
       mitt.emit(clickPortPointMittKey, { id: "", name: "秦港股份" });
@@ -59,26 +77,34 @@ function Header(props) {
 
   return (
     <div className="map_content_header_container">
-      <header
+      <CSSTransition
-        className={`${props.headerTitle === "秦港股份安全监管平台" ? "port" : "branch_office"}`}
+        timeout={animationTime}
-        style={{ backgroundImage: `url(${props.headerTitle === "秦港股份安全监管平台" ? topImg1 : topImg2})` }}
+        classNames={{
+          enter: "animate__animated",
+          enterActive: "animate__animated animate__fadeInDown",
+          exit: "animate__animated",
+          exitActive: "animate__animated animate__fadeOutUp",
+        }}
+        unmountOnExit
+        in={animationShow}
       >
-        {(currentPort && props.headerTitle === "秦港股份安全监管平台") && (
+        <header
-          <div
+          className={`${displayTitle === "秦港股份安全监管平台" ? "port" : "branch_office"}`}
-            style={{ backgroundImage: `url(${backImg1})` }}
+          style={{ backgroundImage: `url(${displayTitle === "秦港股份安全监管平台" ? topImg1 : topImg2})` }}
-            className="back"
+        >
-            onClick={onBack}
+          {(currentPort && displayTitle === "秦港股份安全监管平台") && (
-          />
+            <div style={{ backgroundImage: `url(${backImg1})` }} className="back" onClick={onBack} />
           )}
-        {props.headerTitle !== "秦港股份安全监管平台" && (
+          {displayTitle !== "秦港股份安全监管平台" && (
             <div className="back" onClick={onBack}>
               <img src={backImg2} alt="" />
               <div>返回</div>
             </div>
           )}
-        <div className="title">{props.headerTitle}</div>
+          <div className="title">{displayTitle}</div>
           <div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
         </header>
+      </CSSTransition>
     </div>
   );
 }

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

@@ -1,5 +1,6 @@
 import { message } from "antd";
 import { useContext, useEffect, useState } from "react";
+import { CSSTransition } from "react-transition-group";
 import tooltipImg2 from "~/assets/images/map_bi/right_utils/branch_office/bg11.png";
 import buttonBg from "~/assets/images/map_bi/right_utils/branch_office/button.png";
 import tooltipImg1 from "~/assets/images/map_bi/right_utils/port/tooltip.png";
@@ -21,7 +22,7 @@ function RightUtils(props) {
   const { currentPort, mapMethods, pureMap, currentBranchOffice, bottomUtilsCurrentIndex } = useContext(Context);
 
   const [list, setList] = useState(portUtilsList);
-  const [isShowChildLevel, setIsShowChildLevel] = useState(true);
+  const [isShowChildLevel, setIsShowChildLevel] = useState(false);
 
   useEffect(() => {
     mitt.on(initRightUtilsMittKey, () => {
@@ -134,7 +135,17 @@ function RightUtils(props) {
   const renderBranchOfficeUtils = () => {
     return (
       <div className="right_utils branch_office">
-        {(isShowChildLevel && bottomUtilsCurrentIndex !== -1) && (
+        <CSSTransition
+          timeout={1000}
+          classNames={{
+            enter: "animate__animated animate__faster",
+            enterActive: "animate__animated animate__faster animate__bounceInUp",
+            exit: "animate__animated animate__faster",
+            exitActive: "animate__animated animate__faster animate__bounceOutDown",
+          }}
+          unmountOnExit
+          in={(isShowChildLevel && bottomUtilsCurrentIndex !== -1)}
+        >
           <div className="options">
             {
               list.map((item, index) => (
@@ -149,8 +160,8 @@ function RightUtils(props) {
               ))
             }
           </div>
-        )}
+        </CSSTransition>
-        {bottomUtilsCurrentIndex !== -1 && (
+        {(bottomUtilsCurrentIndex !== -1) && (
           <div
             className={`bg ${isShowChildLevel ? "active" : ""}`}
             onClick={() => setIsShowChildLevel(!isShowChildLevel)}