如何实现不受页面加载状态影响的3秒预显示动画

核心思路 #

不用依赖页面加载事件（如window.onload），而是在组件挂载后直接启动固定时长的定时器，到点强制隐藏动画，完全不受页面资源加载快慢的影响。

修改后的JSX代码 #

import React, { useRef, useState, useEffect } from 'react'
import './home.css'
import video1 from './Ankit.mp4';
// 保留你原有的其他资源导入

export default function Home() {
    // 保留你原有的ref和函数
    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');
    }

    // 新增：控制动画显示的状态，初始为true
    const [showSplash, setShowSplash] = useState(true);
    // 新增：获取video元素的ref，用于后续暂停视频
    const splashVideoRef = useRef(null);

    // 新增：组件挂载后立即启动3秒定时器
    useEffect(() => {
        const timer = setTimeout(() => {
            setShowSplash(false);
            // 可选：暂停视频，避免后台继续播放占用资源
            if (splashVideoRef.current) {
                splashVideoRef.current.pause();
            }
        }, 3000); // 固定3秒后隐藏动画

        // 清理函数：组件卸载时清除定时器，避免内存泄漏
        return () => clearTimeout(timer);
    }, []);

    return (
        <>
            {/* 条件渲染动画：showSplash为true时显示 */}
            {showSplash && (
                <video 
                    ref={splashVideoRef}
                    autoPlay 
                    muted 
                    playsInline 
                    className='logo_video2'
                    preload="auto" // 确保视频尽快加载播放
                >
                    <source src={video1} type="video/mp4" />
                </video>
            )}

            {/* 页面原有内容：包在容器里，动画结束后再显示，避免闪烁 */}
            <div className={`page-content ${!showSplash ? 'visible' : ''}`}>
                {/* 把你原有的页面内容放到这里 */}
            </div>
        </>
    )
}

修改后的CSS代码 #

/* 启动动画视频样式 */
.logo_video2{
    position: fixed;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 自适应屏幕居中，比固定top/right更通用 */
    z-index: 999999; /* 确保盖住所有页面内容 */
    background-color: black; /* 视频加载前显示黑色背景，避免空白 */
}

/* 页面内容容器样式：初始隐藏，动画结束后平滑显示 */
.page-content {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-content.visible {
    visibility: visible;
    opacity: 1;
}

关键修改说明 #

1. React状态替代原生DOM操作：用useState控制动画显示，避免直接操作DOM导致的状态不一致，符合React数据流规范。
2. 独立定时器控制时长：useEffect在组件挂载后立即启动3秒定时器，不管页面图片、视频等资源是否加载完成，到点必隐藏动画。
3. 视频预加载优化：添加preload="auto"确保视频能尽快开始播放，避免动画延迟。
4. 页面内容过渡效果：给页面内容加淡入过渡，避免动画消失后内容突然出现的生硬感。
5. 居中适配优化：用transform: translate(-50%, -50%)实现视频居中，适配不同屏幕尺寸。

额外优化建议 #

• 如果你的动画视频时长正好是3秒，可以去掉loop属性，让视频自然结束后隐藏，同时保留定时器作为 fallback（防止视频加载过慢）。
• 如果需要全屏背景动画，可以把视频的width和height设为100vw和100vh，并添加object-fit: cover保持比例。

内容的提问来源于stack exchange，提问作者Ankit