如何在加载页面之前显示 3 秒的动画答案

【问题标题】：How can I show an animation for 3 second before loading the page如何在加载页面之前显示 3 秒的动画
【发布时间】：2022-10-23 02:05:38
【问题描述】：

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

无论加载如何，我都想显示动画。我怎样才能做到这一点？

这是 .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 ;
}

【问题讨论】：

标签： javascript css reactjs

【解决方案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 />}

}

【讨论】：