纯JS实现Div滑动切换类动画失效问题求助

我来帮你一步步排查并解决这个问题，你的代码里有几个关键问题导致滑动效果没反应，还有编辑器的环境问题需要说明：

1. 核心问题：DOM未加载时获取元素导致事件监听失效 #

你的JavaScript代码里，var nav = document.getElementById("nav-bar");写在了window.onload外面——这时候浏览器还没渲染完DOM，nav会是null，后续的事件监听自然绑定不上，点击按钮自然没反应。

2. CSS滑动逻辑不符合预期 #

你当前的CSS设置和“从左侧滑入”的需求不匹配：

• 初始transform: translateX(-50%)：宽度50%的元素会向左偏移自身宽度的50%（也就是视口的25%），元素还有一半在屏幕内，不是完全隐藏的状态
• 激活类active的transform: translateX(50%)：元素会向右偏移自身宽度的50%，最终位置是视口的25%到75%，这和“滑入”的视觉效果不符

3. 编辑器提示document/window未定义的原因 #

如果你的本地编辑器（比如VS Code）用了Node.js相关的语法检查插件，因为Node环境没有浏览器的window和document对象，所以会报错，但这只是编辑器的提示，代码在浏览器里运行是没问题的。你可以在编辑器里配置忽略这类错误，或者直接在浏览器中测试代码。

修正后的完整代码 #

HTML（修正字体链接的空格问题）

<!DOCTYPE html>
<html>
<head>
    <title>Emanuel Inacio</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:100,300,400" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="home-page">
        <div id="nav-bar"></div>
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS（修正字体名，调整滑动逻辑）

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto Condensed', sans-serif; /* 修正字体拼写错误 */
}

#nav-bar {
    width: 50%;
    height: 100vh;
    background-color: #000000;
    transform: translateX(-100%); /* 初始完全隐藏在左侧屏幕外 */
    transition: transform 0.5s ease; /* 加上ease让动画更平滑自然 */
}

.active {
    transform: translateX(0); /* 滑入到正常显示位置 */
}

JavaScript（确保在DOM加载后获取元素并绑定事件）

// 方案1：把元素获取和事件监听都放到window.onload里，确保DOM已加载
window.onload = function () {
    var nav = document.getElementById("nav-bar");
    nav.addEventListener("click", function () {
        nav.classList.toggle("active");
    });
};

// 方案2：因为你的script标签已经在body末尾，DOM已经加载完成，也可以直接写：
/*
var nav = document.getElementById("nav-bar");
nav.addEventListener("click", function () {
    nav.classList.toggle("active");
});
*/

其他滑动方向的扩展思路 #

如果需要实现从右侧/上方滑入，只需要调整CSS的初始transform和active状态：

• 右侧滑入：初始transform: translateX(100%)，active时transform: translateX(0)
• 上方滑入：初始transform: translateY(-100%)，active时transform: translateY(0)

这样修改后，点击#nav-bar就可以看到正常的左侧滑入效果了，其他Div的滑动逻辑也可以按照这个模式调整。

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