58 lines
1.1 KiB
JavaScript
58 lines
1.1 KiB
JavaScript
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useRef, useEffect, useMemo } from 'react';
|
|
|
|
function EnterToFloorOne(props) {
|
|
const vd = useRef(null);
|
|
const show = props.opacity || 0;
|
|
|
|
useEffect(() => {
|
|
if (show) vd.current.play();
|
|
}, [show]);
|
|
|
|
// const show = useMemo(
|
|
// () => ({
|
|
// opacity: 1,
|
|
// display: 'block',
|
|
// duration: 0,
|
|
// }),
|
|
// [],
|
|
// );
|
|
// const hide = useMemo(
|
|
// () => ({
|
|
// opacity: 0,
|
|
// transitionEnd: {
|
|
// display: 'none',
|
|
// },
|
|
// }),
|
|
// [],
|
|
// );
|
|
|
|
return (
|
|
<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;
|