update video play

src/components/模块组件/窑炉内部/Center/VideoContainer.jsx

@@ -4,6 +4,7 @@ import EnterToFloorTwo from './videoComponents/EnterToFloor2';
 import FloorOneToTwo from './videoComponents/Floor1To2';
 import FloorTwoToOne from './videoComponents/Floor2To1';
 import { useRef, useEffect, useReducer } from 'react';
+import { AnimatePresence } from 'framer-motion';
 
 const initOpacity = {
 	enterVideo: 1,
@@ -86,16 +87,17 @@ function VideoContainer(props) {
 	}
 
 	return (
-		<>
+		<AnimatePresence>
 			<EnterVideo
+				key="enter"
 				onVideoEnd={handleEnterVideoEnd}
 				opacity={opacity.enterVideo}
 			/>
-			<EnterToFloorOne opacity={opacity.enterToFloorOne} />
-			<EnterToFloorTwo opacity={opacity.enterToFloorTwo} />
-			<FloorOneToTwo opacity={opacity.floorOneToTwo} />
-			<FloorTwoToOne opacity={opacity.floorTwoToOne} />
-		</>
+			<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
+			<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
+			<FloorOneToTwo key="1-to-2" opacity={opacity.floorOneToTwo} />
+			<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
+		</AnimatePresence>
 	);
 }
 

src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor1.jsx

@@ -1,44 +1,57 @@
-import { motion } from 'framer-motion';
-import { useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useRef, useEffect, useMemo } from 'react';
 
 function EnterToFloorOne(props) {
 	const vd = useRef(null);
-	const opacity = props.opacity || 0;
-
-	if (opacity == 1) {
-		setTimeout(() => {
-			vd.current.play();
-		}, 100);
-	}
+	const show = props.opacity || 0;
 
 	useEffect(() => {
-		vd.current.addEventListener('ended', () => {
-			setTimeout(() => {
-				vd.current.currentTime = 0;
-			}, 1000);
-		});
-	}, []);
+		if (show) vd.current.play();
+	}, [show]);
+
+	// const show = useMemo(
+	// 	() => ({
+	// 		opacity: 1,
+	// 		display: 'block',
+	// 		duration: 0,
+	// 	}),
+	// 	[],
+	// );
+	// const hide = useMemo(
+	// 	() => ({
+	// 		opacity: 0,
+	// 		transitionEnd: {
+	// 			display: 'none',
+	// 		},
+	// 	}),
+	// 	[],
+	// );
 
 	return (
-		<motion.div
-			className="video-wrapper"
-			style={{
-				position: 'fixed',
-				top: 0,
-				left: 0,
-				width: '100%',
-				height: '100%',
-				zIndex: -1000,
-				opacity: opacity,
-				zIndex: -999,
-			}}
-			transition={{ type: 'tween', duration: 1 }}
-		>
-			<video ref={vd} muted width={'100%'}>
-				<source src="/video/floor1.webm" type="video/mp4" />
-			</video>
-		</motion.div>
+		<AnimatePresence>
+			{show && (
+				<motion.div
+					className="video-wrapper"
+					style={{
+						position: 'fixed',
+						top: 0,
+						left: 0,
+						width: '100%',
+						height: '100%',
+						zIndex: -999,
+					}}
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
+				>
+					<video ref={vd} muted width={'100%'}>
+						<source src="/video/floor1.webm" type="video/mp4" />
+					</video>
+				</motion.div>
+			)}
+		</AnimatePresence>
 	);
+	+66;
 }
 
 export default EnterToFloorOne;

src/components/模块组件/窑炉内部/Center/videoComponents/EnterVideo.jsx

@@ -1,8 +1,8 @@
-import { motion } from 'framer-motion';
-import { useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useEffect, useRef, useMemo } from 'react';
 
 function EnterVideo(props) {
-	const opacity = props.opacity || 0;
+	const show = props.opacity || 0;
 	const vd = useRef(null);
 
 	useEffect(() => {
@@ -10,24 +10,28 @@ function EnterVideo(props) {
 	}, []);
 
 	return (
-		<motion.div
-			className="video-wrapper"
-			style={{
-				position: 'fixed',
-				top: 0,
-				left: 0,
-				width: '100%',
-				height: '100%',
-				zIndex: -1000,
-				opacity: opacity,
-				zIndex: -1000,
-			}}
-			transition={{ type: 'tween' }}
-		>
-			<video ref={vd} muted autoPlay={true} width={'100%'}>
-				<source src="/video/enter.webm" type="video/mp4" />
-			</video>
-		</motion.div>
+		<AnimatePresence>
+			{show && (
+				<motion.div
+					className="video-wrapper"
+					style={{
+						position: 'fixed',
+						top: 0,
+						left: 0,
+						width: '100%',
+						height: '100%',
+						zIndex: -1000,
+					}}
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
+				>
+					<video ref={vd} muted autoPlay={true} width={'100%'}>
+						<source src="/video/enter.webm" type="video/mp4" />
+					</video>
+				</motion.div>
+			)}
+		</AnimatePresence>
 	);
 }
 

src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx

@@ -1,42 +1,37 @@
-import { motion } from 'framer-motion';
-import { useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useRef, useEffect, useMemo } from 'react';
 
 function FloorOneToTwo(props) {
 	const vd = useRef(null);
-	const opacity = props.opacity || 0;
-
-	if (opacity == 1) {
-		setTimeout(() => {
-			vd.current.play();
-		}, 100);
-	}
+	const show = props.opacity || 0;
 
 	useEffect(() => {
-		vd.current.addEventListener('ended', () => {
-			setTimeout(() => {
-				vd.current.currentTime = 0;
-			}, 1000);
-		});
-	}, []);
+		if (show) vd.current.play();
+	}, [show]);
 
 	return (
-		<motion.div
-			className="video-wrapper"
-			style={{
-				position: 'fixed',
-				top: 0,
-				left: 0,
-				width: '100%',
-				height: '100%',
-				zIndex: -998,
-				opacity,
-			}}
-			transition={{ type: 'tween', duration: 1 }}
-		>
-			<video ref={vd} muted width={'100%'}>
-				<source src="/video/1to2.webm" type="video/mp4" />
-			</video>
-		</motion.div>
+		<AnimatePresence>
+			{show && (
+				<motion.div
+					className="video-wrapper"
+					style={{
+						position: 'fixed',
+						top: 0,
+						left: 0,
+						width: '100%',
+						height: '100%',
+						zIndex: -998,
+					}}
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
+				>
+					<video ref={vd} muted width={'100%'}>
+						<source src="/video/1to2.webm" type="video/mp4" />
+					</video>
+				</motion.div>
+			)}
+		</AnimatePresence>
 	);
 }
 

src/components/模块组件/窑炉内部/Center/videoComponents/Floor2To1.jsx

@@ -1,43 +1,37 @@
-import { motion } from 'framer-motion';
-import { useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useRef, useEffect, useMemo } from 'react';
 
 function FloorTwoToOne(props) {
 	const vd = useRef(null);
-	const opacity = props.opacity || 0;
-
-	if (opacity == 1) {
-		setTimeout(() => {
-			vd.current.play();
-		}, 100);
-	}
+	const show = props.opacity || 0;
 
 	useEffect(() => {
-		vd.current.addEventListener('ended', () => {
-			setTimeout(() => {
-				vd.current.currentTime = 0;
-			}, 1000);
-		});
-	}, []);
+		if (show) vd.current.play();
+	}, [show]);
 
 	return (
-		<motion.div
-			className="video-wrapper"
-			style={{
-				position: 'fixed',
-				top: 0,
-				left: 0,
-				width: '100%',
-				height: '100%',
-				zIndex: -1000,
-				opacity: opacity,
-				zIndex: -998,
-			}}
-			transition={{ type: 'tween', duration: 1 }}
-		>
-			<video ref={vd} muted width={'100%'}>
-				<source src="/video/2to1.webm" type="video/mp4" />
-			</video>
-		</motion.div>
+		<AnimatePresence>
+			{show && (
+				<motion.div
+					className="video-wrapper"
+					style={{
+						position: 'fixed',
+						top: 0,
+						left: 0,
+						width: '100%',
+						height: '100%',
+						zIndex: -998,
+					}}
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
+				>
+					<video ref={vd} muted width={'100%'}>
+						<source src="/video/2to1.webm" type="video/mp4" />
+					</video>
+				</motion.div>
+			)}
+		</AnimatePresence>
 	);
 }