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中断，用户点关闭按钮时会冲突
