CSS 过渡无法作用于 display，应使用 opacity+visibility 配合 transition 实现成功提示；需预先定义隐藏 / 显示状态，用 classList.add()安全添加 class，并在接口成功回调中触发显示。
submit 后怎么用 CSS 过渡显示成功提示
直接加 display: none 再切回 block 不行——CSS 过渡对 display 完全无效，必须用可动画的属性（比如opacity、transform、height）配合transition。
核心思路是：表单提交成功后，给提示元素添加一个“可见”class，这个 class 只控制 opacity 和visibility，并定义transition；初始状态要提前写好隐藏态（opacity: 0; visibility: hidden），不能靠 JS 临时设内联样式覆盖。
- 必须提前在 CSS 里定义好两个状态，不能只靠 JS 改
style.opacity——那样会绕过 CSS transition -
visibility: hidden要和opacity: 0配对用：只设opacity: 0元素仍占位，影响布局；只设visibility: hidden又不触发过渡 - 过渡时间建议设在
.2s–.3s之间，太长显得卡顿，太短用户感知不到
为什么 add_class 比 set_attribute 更可靠
用 element.setAttribute('class', 'show success') 会覆盖整个 class 列表，极容易误删其他动态 class（比如校验状态 is-valid 或加载中loading）。
而 element.classList.add('show') 是增量操作，安全、语义清晰，且原生支持多 class 批量添加。
立即学习 “ 前端免费学习笔记（深入）”；
- 别手写
element.className += 'show'——空格处理易出错，重复添加无去重 - 如果需要切换状态（比如从错误提示切到成功提示），用
classList.replace('error', 'show')比先remove再add更原子 - IE10+ 支持
classList，如需兼容 IE9，用className.split(' ').includes(……)+ 字符串拼接兜底
transition 不起作用的三个高频原因
CSS 过渡失效，80% 以上集中在以下三点，和 JS 逻辑无关，纯 CSS 配置问题。
- 没写初始隐藏态：比如 CSS 里只有
.success.show {opacity: 1;}，但没定义.success {opacity: 0; visibility: hidden; transition: opacity .25s;} -
transition写在了目标 class 上（如.show {transition: ……}），正确位置是基础 class（如.success）上——过渡必须始终存在，才能响应 class 增减 - 用了
transition: all .25s但同时改了多个不可动画属性（比如display或z-index），导致整个过渡被浏览器静默忽略
form submit 后如何避免重复点击 + 确保提示时机准确
成功提示不是越快越好——它必须等接口返回确认成功后再显示，否则可能闪一下就消失（比如网络失败或后端报错），反而误导用户。
- 务必在
fetch().then()或axios.then()的成功回调里调用classList.add('show')，不要放在submit事件监听器开头 - 提交瞬间禁用按钮：
button.disabled = true，并在成功 / 失败回调里恢复，防止连点触发多次请求 - 如果提示要自动关闭，用
setTimeout(() => el.classList.remove('show'), 3000)，而不是 CSS animation——后者无法被 JS 中断，用户点关闭按钮时会冲突
