如何在加载页面之前显示动画3秒钟

Question

我想在显示网站内容之前先显示一个动画。我自己试过，然后看了一些视频，但视频显示了如何在网站加载时交付加载程序。

我想在不考虑加载的情况下显示动画。我该怎么做？

这是.jsx文件，下面是CSS文件。

import React, { useRef } from 'react'
import './home.css'
import video from './A.mp4';
import video1 from './Ankit.mp4';
import img1 from './home1.jpeg';
import img2 from './home4.jpeg';
import img3 from './home3.jpeg';
import { faDisplay } from '@fortawesome/free-solid-svg-icons';
export default function Home() {
const about = useRef(null);
const work = useRef(null);
const contact = useRef(null);
const scrollSection = (elementRef) => {
window.scrollTo({
top: elementRef.current.offsetTop,
behavior: "smooth",
});
};
const alerting = () => {
window.alert('Adding soon');
}
let preloder = document.getElementsByClassName('logo_video2');
const showlogo = () =>{
preloder.style.display = 'none';
}
return (
<>
<video loop autoPlay muted playsInline className='logo_video2' >
<source src={video1} type="video/mp4" />
</video>

现在，这是同一查询的CSS部分。

.logo_video2{
position: fixed;
width:  200px;
height: 200px;
top: 35%;
right: 25%;
background: black url('./Ankit.mp4') no-repeat center;
z-index: 98798798 ;
}

Answer 1

您可以将状态变量设置为true，然后在3秒钟后将其设置为false，并相应地有条件地渲染视频组件。

请在此处查找所需代码。

export default function Home() {
const [showVideo, setShowVideo] = useState(true);
const about = useRef(null);
const work = useRef(null);
const contact = useRef(null);
useEffect(
() => {
let timer1 = setTimeout(() => setShowVideo(false), 3000);
return () => {
clearTimeout(timer1);
};
},
[]
);
return (
<>
{showVideo ? <video loop autoPlay muted playsInline className='logo_video2' >
<source src={video1} type="video/mp4" />
</video> : <YourOtherComponent />}
}