UI: 动画样式优化

src/components/CommonComponents/FullScreenDrawer/index.module.css

@@ -8,13 +8,10 @@
 	z-index: 100;
 	display: flex;
 	flex-direction: column;
+	align-items: center;
 	animation: showBG 0.31s ease;
 	-webkit-animation: showBG 0.31s ease;
 }
-.drawerBoxHidden {
-	animation: hiddenBG 0.31s ease;
-	-webkit-animation: hiddenBG 0.31s ease;
-}
 .closeBox {
 	display: flex;
 	justify-content: flex-end;
@@ -23,13 +20,6 @@
 	position: fixed;
 	top: 0;
 	left: 0;
-	align-items: center;
-	animation: showClose 0.31s ease;
-	-webkit-animation: showClose 0.31s ease;
-}
-.closeBoxHidden {
-	animation: hiddenClose 0.31s ease;
-	-webkit-animation: hiddenClose 0.31s ease;
 }
 .closeiIcon {
 	position: absolute;
@@ -44,17 +34,14 @@
 	position: fixed;
 	top: 40px;
 	left: 0;
+	right: 0;
 	background-color: #fff;
 	border-radius: 16px 0 0 0;
-	/* padding: 24px 32px; */
 	box-sizing: border-box;
 	overflow: scroll;
 	animation: showDrawer 0.31s ease;
 	-webkit-animation: showDrawer 0.31s ease;
-}
-.contentBoxHidden {
-	animation: hiddenDrawer 0.31s ease;
-	-webkit-animation: hiddenDrawer 0.31s ease;
+	margin: 0 auto;
 }
 
 @keyframes showBG {
@@ -66,47 +53,15 @@
 	}
 }
 
-@keyframes hiddenBG {
-	from {
-		background-color: rgba(0, 0, 0, 0.78);
-	}
-	to {
-		background-color: rgba(0, 0, 0, 0);
-	}
-}
-
-@keyframes showClose {
-	from {
-		top: calc(100% - 40px);
-	}
-	to {
-		top: 0px;
-	}
-}
-
-@keyframes hiddenClose {
-	from {
-		top: 0px;
-	}
-	to {
-		top: calc(100% - 40px);
-	}
-}
-
 @keyframes showDrawer {
 	from {
-		top: 100%;
+		top: 160px;
+		width: calc(100vw - 28px);
+		opacity: 0;
 	}
 	to {
 		top: 40px;
-	}
-}
-
-@keyframes hiddenDrawer {
-	from {
-		top: 40px;
-	}
-	to {
-		top: 100%;
+		width: 100vw;
+		opacity: 1;
 	}
 }

src/components/CommonComponents/FullScreenDrawer/index.tsx

 // 从下往上弹的全屏抽屉
-import { useState } from "react";
+// import { useState } from "react";
 import style from "./index.module.css";
 import classNames from "classnames";
 import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
@@ -11,26 +11,26 @@ type IFullScreenDrawerProps = {
 
 const FullScreenDrawer = (props: IFullScreenDrawerProps) => {
 	const { children, handleClose } = props;
-	const [closeing, setCloseing] = useState(false);
+	// const [closeing, setCloseing] = useState(false);
 
 	const handleReadyToClose = () => {
-		setCloseing(true);
-		setTimeout(() => {
-			setCloseing(false);
-			handleClose();
-		}, 300);
+		// setCloseing(true);
+		// setCloseing(false);
+		handleClose();
+		// setTimeout(() => {
+		// }, 300);
 	};
 	return (
 		<div
 			className={classNames({
 				[style.drawerBox]: true,
-				[style.drawerBoxHidden]: closeing,
+				// [style.drawerBoxHidden]: closeing,
 			})}
 		>
 			<div
 				className={classNames({
 					[style.closeBox]: true,
-					[style.closeBoxHidden]: closeing,
+					// [style.closeBoxHidden]: closeing,
 				})}
 			>
 				<CloseOutlinedIcon
@@ -41,7 +41,7 @@ const FullScreenDrawer = (props: IFullScreenDrawerProps) => {
 			<div
 				className={classNames({
 					[style.contentBox]: true,
-					[style.contentBoxHidden]: closeing,
+					// [style.contentBoxHidden]: closeing,
 				})}
 			>
 				{children}

src/views/Project/ProjectData/SeeDataset/index.tsx

@@ -53,7 +53,7 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
 	useEffect(() => {
 		setTimeout(() => {
 			setShowAnimation(false);
-		}, 1000);
+		}, 300);
 	}, []);
 
 	const isCadd = useMemo(() => {