页面初始分割图片入场动画失效，页面空白求助

核心问题梳理 #

1. CSS拼写错误：.left > div 中widt应为width，导致左侧图片容器宽度失效
2. 子元素透明设置：.right > div和.left > div默认opacity:0，父元素激活后仍无法显示图片
3. JS定时器无延迟：所有setTimeout未设置延迟参数，动画逻辑瞬间执行，直接隐藏入场容器
4. 样式目标错误：fade类应作用于.image-slider而非.leftright元素，原CSS规则针对.image-slider.fade
5. 定位冲突：.right同时设置left:50%和right:-990px，定位逻辑混乱；初始位置用transform更适配不同屏幕
6. 页面高度缺失：header设置height:100%但body无高度，导致底部文本无法显示

修复后的完整代码 #

HTML（仅图片路径需确保正确） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Split Image Intro</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
</head>
<body>
    <div class="intro">
        <div class="image-slider">
            <div class="left leftright" >
                <div class="leftmain" style="background-image: url(images/left.jpg);"></div>
            </div>
            <div class="right leftright">
                <div class="main" style="background-image: url(images/right-bike.jpg);"></div>
            </div>
        </div>
    </div>
    <header>
        <h4>hello world</h4>
    </header>
    <script src="script.js"></script>
</body>
</html>

CSS #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    min-height: 100vh; /* 确保页面高度铺满视口 */
}

header {
    position: relative;
    width: 100%;
    height: 100vh; /* 直接设置为视口高度 */
}

header h4 {
    position: absolute;
    left: 10%;
    bottom: 1rem;
}

.intro {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0; /* 补充top定位 */
    width: 100%;
    height: 100vh;
    transition: top 1s ease-in-out; /* 明确过渡属性 */
}

.image-slider {
    width: 100%;
    height: 100vh;
    position: relative;
    transition: all 0.5s ease-in-out; /* 给slider加过渡 */
}

.right {
    height: 100%;
    position: absolute;
    left: 50%;
    width: 50%;
    top: 0;
    opacity: 0;
    transform: translateX(100%); /* 用transform实现右侧初始偏移 */
    transition: all 0.5s ease-in-out;
}

.right > div {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
    /* 移除默认opacity:0 */
}

.left {
    height: 100%;
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateX(-100%); /* 用transform实现左侧初始偏移 */
    transition: all 0.5s ease-in-out;
}

.left > div {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%; /* 修复拼写错误 */
}

.right.active, .left.active {
    opacity: 1;
    transform: translateX(0); /* 激活时回到原位 */
}

.image-slider.fade {
    transform: translateY(-150px); /* 用transform实现上移 */
    opacity: 0;
}

JS #

let intro = document.querySelector('.intro');
let imageSlider = document.querySelector('.image-slider');
let imageDivs = document.querySelectorAll('.leftright');

window.addEventListener('DOMContentLoaded', () => {
    // 第一步：左右图片入场
    setTimeout(() => {
        imageDivs.forEach(div => {
            div.classList.add('active');
        });
    }, 500); // 延迟500ms启动入场

    // 第二步：图片上移淡出
    setTimeout(() => {
        imageSlider.classList.add('fade');
    }, 2000); // 入场后延迟1.5s执行上移

    // 第三步：隐藏整个intro容器
    setTimeout(() => {
        intro.style.top = '-100vh';
    }, 2500); // 上移动画完成后隐藏
});

修复说明 #

• 修正CSS拼写错误，确保图片容器宽度正常
• 移除子元素默认透明设置，保证图片能显示
• 给JS定时器添加合理延迟，让动画按顺序执行：入场→上移→隐藏
• 用transform替代固定像素偏移，适配不同屏幕尺寸
• 补充页面高度设置，显示底部的hello world文本
• 明确CSS过渡属性，避免不必要的性能消耗

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