zcloud_gbs
/
zcloud-gbs-bi-react
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

master
LiuJiaNan 2026-01-12 16:51:34 +08:00
parent cb74b2f690
commit 5eff5dd284
4 changed files with 116 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/Container/Map/components/BottomUtils/index.js
View File

@ -1,4 +1,5 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { CSSTransition } from "react-transition-group";
import bg7 from "~/assets/images/map_bi/bottom_utils/bg7.png"; import bg7 from "~/assets/images/map_bi/bottom_utils/bg7.png";
import bg8 from "~/assets/images/map_bi/bottom_utils/bg8.png"; import bg8 from "~/assets/images/map_bi/bottom_utils/bg8.png";
import titleImg from "~/assets/images/map_bi/bottom_utils/title.png"; import titleImg from "~/assets/images/map_bi/bottom_utils/title.png";
@ -91,7 +92,17 @@ function BottomUtils(props) {
onClick={() => optionsClick(index)} onClick={() => optionsClick(index)}
> >
<div className="label">{item.label}</div> <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"> <div className="items">
{item.list?.map((item1, index1) => ( {item.list?.map((item1, index1) => (
<div <div
@ -106,7 +117,7 @@ function BottomUtils(props) {
</div> </div>
))} ))}
</div> </div>
)} </CSSTransition>
</div> </div>
); );
})} })}

45
src/pages/Container/Map/components/CenterUtils/index.js
View File

@ -1,4 +1,5 @@
import { useContext, useState } from "react"; import { useContext, useState } from "react";
import { CSSTransition } from "react-transition-group";
import statisticsTitleImg from "~/assets/images/map_bi/center_utils/statistics_title.png"; import statisticsTitleImg from "~/assets/images/map_bi/center_utils/statistics_title.png";
import guangImg from "~/assets/images/map_bi/center_utils/tabguang.png"; import guangImg from "~/assets/images/map_bi/center_utils/tabguang.png";
import tabLeftImg from "~/assets/images/map_bi/center_utils/tableft.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 [activeIndex, setActiveIndex] = useState(1);
const onChangeArea = (index) => { const onChangeArea = (index) => {
if (index === activeIndex)
return;
setActiveIndex(index); setActiveIndex(index);
props.setArea(list[index].area); props.setArea(list[index].area);
mapMethods.current.removeBranchOfficePoint(); mapMethods.current.removeBranchOfficePoint();
@ -38,7 +41,17 @@ function CenterUtils(props) {
return ( return (
<div className="map_content_center_options_container"> <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>
<div className="center_options"> <div className="center_options">
<div <div
@ -61,7 +74,17 @@ function CenterUtils(props) {
))} ))}
</div> </div>
<div className="statistics"> <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="statistic">
<div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>西港区</div> <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>西港区</div>
<div className="info"> <div className="info">
@ -69,8 +92,18 @@ function CenterUtils(props) {
<div className="value">车辆：33辆</div> <div className="value">车辆：33辆</div>
</div> </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="statistic">
<div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>东港区</div> <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>东港区</div>
<div className="info"> <div className="info">
@ -78,10 +111,10 @@ function CenterUtils(props) {
<div className="value">车辆：33辆</div> <div className="value">车辆：33辆</div>
</div> </div>
</div> </div>
)} </CSSTransition>
</div> </div>
</div> </div>
)} </CSSTransition>
</div> </div>
); );
} }

72
src/pages/Container/Map/components/Header/index.js
View File

@ -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 backImg1 from "~/assets/images/map_bi/back1.png";
import backImg2 from "~/assets/images/map_bi/back2.png"; import backImg2 from "~/assets/images/map_bi/back2.png";
import guangImg from "~/assets/images/map_bi/guang.png"; import guangImg from "~/assets/images/map_bi/guang.png";
@ -17,9 +18,26 @@ import {
} from "~/pages/Container/Map/js/mittKey"; } from "~/pages/Container/Map/js/mittKey";
import "./index.less"; import "./index.less";
const animationTime = 1000;
function Header(props) { function Header(props) {
const { currentPort, currentBranchOffice, mapMethods, area } = useContext(Context); 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 = () => { const onBack = () => {
sessionStorage.removeItem("mapCurrentBranchOfficeId"); sessionStorage.removeItem("mapCurrentBranchOfficeId");
mitt.emit(deletePeoplePositionPointMittKey); mitt.emit(deletePeoplePositionPointMittKey);
@ -38,9 +56,9 @@ function Header(props) {
mapMethods.current.removeBranchOfficePoint(); mapMethods.current.removeBranchOfficePoint();
mapMethods.current.removeMarkPoint(); mapMethods.current.removeMarkPoint();
mapMethods.current.returnPreviousCenterPoint(); mapMethods.current.returnPreviousCenterPoint();
setTimeout(() => { // setTimeout(() => {
mapMethods.current.addBranchOfficePoint(area); mapMethods.current.addBranchOfficePoint(area);
}, 2000); // }, 2000);
} }
else if (currentPort) { else if (currentPort) {
mitt.emit(clickPortPointMittKey, { id: "", name: "秦港股份" }); mitt.emit(clickPortPointMittKey, { id: "", name: "秦港股份" });
@ -59,26 +77,34 @@ function Header(props) {
return ( return (
<div className="map_content_header_container"> <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}> <div className="back" onClick={onBack}>
<img src={backImg2} alt="" /> <img src={backImg2} alt="" />
<div>返回</div> <div>返回</div>
</div> </div>
)} )}
<div className="title">{props.headerTitle}</div> <div className="title">{displayTitle}</div>
<div style={{ backgroundImage: `url(${guangImg})` }} className="guang" /> <div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
</header> </header>
</CSSTransition>
</div> </div>
); );
} }

19
src/pages/Container/Map/components/RightUtils/index.js
View File

@ -1,5 +1,6 @@
import { message } from "antd"; import { message } from "antd";
import { useContext, useEffect, useState } from "react"; 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 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 buttonBg from "~/assets/images/map_bi/right_utils/branch_office/button.png";
import tooltipImg1 from "~/assets/images/map_bi/right_utils/port/tooltip.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 { currentPort, mapMethods, pureMap, currentBranchOffice, bottomUtilsCurrentIndex } = useContext(Context);
const [list, setList] = useState(portUtilsList); const [list, setList] = useState(portUtilsList);
const [isShowChildLevel, setIsShowChildLevel] = useState(true); const [isShowChildLevel, setIsShowChildLevel] = useState(false);
useEffect(() => { useEffect(() => {
mitt.on(initRightUtilsMittKey, () => { mitt.on(initRightUtilsMittKey, () => {
@ -134,7 +135,17 @@ function RightUtils(props) {
const renderBranchOfficeUtils = () => { const renderBranchOfficeUtils = () => {
return ( return (
<div className="right_utils branch_office"> <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"> <div className="options">
{ {
list.map((item, index) => ( list.map((item, index) => (
@ -149,8 +160,8 @@ function RightUtils(props) {
)) ))
} }
</div> </div>
)} </CSSTransition>
{bottomUtilsCurrentIndex !== -1 && ( {(bottomUtilsCurrentIndex !== -1) && (
<div <div
className={`bg ${isShowChildLevel ? "active" : ""}`} className={`bg ${isShowChildLevel ? "active" : ""}`}
onClick={() => setIsShowChildLevel(!isShowChildLevel)} onClick={() => setIsShowChildLevel(!isShowChildLevel)}