update

package.json

@@ -25,7 +25,7 @@
         "antd": "^4.20.6",
         "echarts": "^5.3.2",
         "echarts-for-react": "^3.0.2",
-        "framer-motion": "^6.3.3",
+        "framer-motion": "^6.5.1",
         "less": "^4.1.3",
         "less-loader": "^11.0.0",
         "react": "^16.8.6",

src/pages/总览/index.jsx

@@ -2,21 +2,24 @@ import LeftBar from '../../components/模块组件/总览/LeftSide';
 import BottomBar from '../../components/模块组件/总览/Bottom';
 import RightBar from '../../components/模块组件/总览/RightSide';
 import CenterTopData from '../../components/模块组件/总览/CenterTop';
-
+import { AnimatePresence, motion } from 'framer-motion';
 import V3DBG from '../../assets/V3DBG.png';
 
 const KilnTotalLeft = (props) => {
 	return (
-		<div
+		<motion.div
 			style={{
 				marginLeft: '40px',
 				width: '625px',
 				height: '100%',
 				background: '#fff3',
 			}}
+			initial={{ opacity: 0, position: 'absolute' }}
+			animate={{ opacity: 1, position: 'unset' }}
+			exit={{ opacity: 0, position: 'absolute' }}
 		>
 			窑炉总览LEFT
-		</div>
+		</motion.div>
 	);
 };
 
@@ -110,7 +113,9 @@ export default function Home({ active }) {
 	return (
 		<div className="Main">
 			{/* {active == '窑炉总览' && <KilnTotalLeft />} */}
-			{active == '窑炉总览' && <LeftBar />}
+			<AnimatePresence>
+				{active == '窑炉总览' && <KilnTotalLeft />}
+			</AnimatePresence>
 			{active == '窑炉内部' && <KilnInnerLeft />}
 			{active == '退火监测' && <FireCheckLeft />}
 			{active == '质检统计' && <QualityCheckLeft />}