自动隐藏底部悬浮提示条必须在动画结束后真实移除节点（如bar.remove()），而非仅用display:none或visibility:hidden切换样式，否则因dom仍存在，事件监听器、定时器、焦点和滚动逻辑可能意外触发残留行为。
自动隐藏底部悬浮提示条不能靠 CSS 动画延时 + opacity 隐藏完就完事——它必须在隐藏后真实移除节点或重置状态，否则滚动、焦点切换、键盘操作都可能意外触发残留逻辑。
为什么用 display: none 或 visibility: hidden 会失效
很多实现只切样式，结果出现三类问题：用户滚动页面后提示条又“闪现”出来；键盘 Tab 焦点跳过按钮却仍能触发动画；iOS Safari 键盘收起后，visibility: hidden 的元素因 viewport 变化重新渲染导致错位。根本原因是这些声明不改变 DOM 存在状态，事件监听器、定时器、CSS 动画 fill-mode 都还在运行。
无序列表呈现关键点：
-
display: none触发重排，动画中断，且后续offsetHeight判断为 0，容易误判“已隐藏” -
visibility: hidden保留占位和事件绑定，focus()或scrollIntoView()仍可能把它拉回视图 - 仅靠
@keyframes+opacity动画，结束帧没清理transform或z-index，会导致下一次 show 从错误位置开始
setTimeout + remove() 是最简可靠的隐藏路径
自动隐藏的本质是：动画播完 → 状态清空 → 节点销毁。不依赖任何 CSS 类切换或 JS 状态标记，避免竞态。
无序列表呈现实操建议：
- 动画结束时间必须与 CSS
animation-duration严格一致，例如 CSS 写animation: slideIn 0.3s ease-out，JS 就用setTimeout(() => bar.remove(), 300) - 调用
bar.remove()前，先检查节点是否还存在于 DOM：if (bar.parentNode) bar.remove()，防止重复执行报错 - 不要在
animationend事件里 remove——部分浏览器（如旧版 Safari）对fixed元素的该事件触发不可靠 - 如果需支持“手动关闭后不再显示”，
remove()后立刻写入localStorage.setItem('bottom-toast-hidden', '1')
如何让“自动隐藏”不干扰滚动和键盘导航
底部悬浮条默认会劫持 Tab 顺序、影响 scroll-behavior: smooth，尤其在它处于 opacity: 0 但未移除时。
无序列表呈现关键配置：
- 给悬浮条加
tabindex="-1"，确保它不进入自然 Tab 顺序；若需键盘可访问，改用tabindex="0"并配aria-live="polite" - CSS 中必须设
pointer-events: none在隐藏过渡期（即 opacity 为 0 但节点尚存的那几十毫秒），否则鼠标悬停仍可能触发mouseenter - 避免在
body上监听scroll来控制显示/隐藏——移动端滚动惯性大，事件频率高，易卡顿；改用IntersectionObserver监听自身是否在视口内更轻量 - 若页面有
scroll-behavior: smooth，悬浮条的position: fixed可能导致scrollIntoView({ behavior: 'smooth' })计算偏移异常，此时应在scrollIntoView前临时bar.style.display = 'none'
真正难处理的不是“怎么让它消失”，而是“消失之后系统是否还把它当活物”。只要节点没被 remove()，浏览器就继续计算它的层叠上下文、焦点流、无障碍树节点——这些隐性开销在线上环境才会暴露，调试时往往看不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
