本文解决 javascript 中因错误添加 css 类名前缀（如误写为 ".open-popup"）导致弹窗无法显示的问题，详解 classlist.add() 的正确用法、css 动画触发逻辑及调试要点。

本文解决 javascript 中因错误添加 css 类名前缀（如误写为 ".open-popup"）导致弹窗无法显示的问题，详解 classlist.add() 的正确用法、css 动画触发逻辑及调试要点。

在构建词汇学习页面时，一个常见需求是：当用户输入正确的德语翻译后，立即显示友好提示弹窗（Popup）。你已完成了 HTML 结构、CSS 动画样式和基础 JS 逻辑，但弹窗始终不出现——即使浏览器开发者工具中显示 .popup 元素已被添加了 open-popup 类。问题根源往往藏在细微之处。

? 核心问题：classList.add() 不接受 CSS 选择器语法

你在 openPopUp() 函数中写了：

function openPopUp() {
    popUp.classList.add(".open-popup"); // ❌ 错误：带点号（.）
}

这是典型的误解：classList.add() 接收的是纯类名字符串（如 "open-popup"），而非 CSS 选择器（如 ".open-popup"）。加点号会导致浏览器尝试添加一个名为 ".open-popup" 的真实类名（含字面量点号），而你的 CSS 规则 open-popup 并不匹配它，因此过渡动画（transform 和 visibility）完全不会触发。

✅ 正确写法应为：

function openPopUp() {
    popUp.classList.add("open-popup"); // ✅ 无点号，仅类名
}

? 完整修复建议（含健壮性增强）

除了修正类名，以下几点可进一步保障弹窗稳定工作：

1. 确保 DOM 元素已加载：将 JS 脚本置于