基于JavaScript实现整页窗帘式向上滑转场效果的需求

以下是修改后的完整代码，实现点击按钮时整页窗帘向上滑动，同步隐藏指定元素并显示.about内容：

HTML 结构 #

添加全屏窗帘转场元素，放在内容容器外部：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curtain Slide Transition</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="content">
        <div class="description">
            <h1>Welcome</h1>
            <p>This is the initial content description.</p>
        </div>
        <button id="getStartedButton">Get Started</button>
        <div class="about">
            <h1>About Us</h1>
            <p>This is the about section content.</p>
        </div>
    </div>
    <div class="curtain"></div>

    <script src="script.js"></script>
</body>
</html>

CSS 样式 #

核心实现窗帘滑动动画与内容同步切换效果：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    position: relative;
    overflow: hidden; /* 防止转场时出现滚动条 */
    background-color: #ffffff; /* 保证窗帘颜色与页面背景一致 */
}

.content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.description, #getStartedButton {
    transition: opacity 0.8s ease, transform 0.8s ease;
    margin: 1rem 0;
}

.about {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* 窗帘基础样式：初始隐藏在页面底部 */
.curtain {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    transform: translateY(100%);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

/* 窗帘向上滑动的激活状态 */
.curtain.slide-up {
    transform: translateY(0);
}

/* 内容切换的激活状态 */
.content.hide-initial .description,
.content.hide-initial #getStartedButton {
    opacity: 0;
    transform: translateY(20px);
}

.content.hide-initial .about {
    opacity: 1;
}

JavaScript 逻辑 #

点击按钮同时触发窗帘动画与内容切换，动画结束后可按需隐藏窗帘：

const getStartedBtn = document.getElementById('getStartedButton');
const contentContainer = document.querySelector('.content');
const curtain = document.querySelector('.curtain');

getStartedBtn.addEventListener('click', () => {
    // 同步触发窗帘滑动与内容切换
    curtain.classList.add('slide-up');
    contentContainer.classList.add('hide-initial');

    // 动画结束后隐藏窗帘（可选，避免遮挡后续内容）
    curtain.addEventListener('transitionend', () => {
        curtain.style.display = 'none';
    }, { once: true });
});

关键修改说明 #

1. 窗帘元素：全屏固定定位，初始通过transform: translateY(100%)隐藏在页面底部，添加slide-up类后向上滑动覆盖整页
2. 同步动画：内容的显示/隐藏动画时长与窗帘过渡保持一致（0.8秒），确保视觉节奏统一
3. 过渡曲线：使用cubic-bezier(0.4, 0, 0.2, 1)让滑动动画更顺滑自然
4. 层级控制：通过z-index确保窗帘在内容上方，转场时完全覆盖原有内容

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