底部固定条的展开层必须脱离其 dom 结构挂载到 body 下，设 position: fixed、显式 bottom/left/right、z-index: 1001，用 transform: translatey() 动画并监听 visualviewport resize 动态适配安全区与键盘。
怎么让底部固定条支持向上展开层
直接在 position: fixed 元素内部用 display: none 切换子层，会导致展开时布局错位、滚动穿透、iOS 键盘弹出后偏移——这不是功能问题，而是 fixed 元素脱离文档流 + 层叠上下文被破坏的必然结果。
展开层必须脱离底部条 DOM 结构
把展开内容（比如菜单、表单、操作面板）写在底部条元素内部，看似省事，实则埋雷：它会继承父级的 fixed 定位上下文，无法独立控制层级和位置；一旦页面有 transform 或 will-change，整个展开层可能消失或错位。
- 正确做法：展开层用
document.body.appendChild()动态挂载到 body 最外层 - 必须设
position: fixed且显式声明bottom、left、right，不能依赖父容器定位 - 高度用
max-height+overflow-y: auto控制，避免撑爆视口；不要用height: 100vh，Safari 地址栏收放时会跳变 - 给展开层加
z-index: 1001（比底部条高一级），避免被 modal 或 toast 覆盖
展开/收起动画别碰 bottom 或 height
用 bottom 值做过渡（比如从 bottom: -200px → bottom: 0）会触发重排，iOS WebView 和低端安卓机上卡顿明显；用 height 更糟，还会导致子元素溢出不可见。
- 只用
transform: translateY()：初始transform: translateY(100%)，展开时设为transform: translateY(0) - 配合
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)，比ease-out更跟手 - 动画开始前加
will-change: transform，但仅在展开瞬间设置，收起后立即清除，避免持续占用 GPU 内存
键盘弹出、滚动、安全区这三处最容易漏
展开层在 iOS 上被软键盘顶飞、在横屏时切到左侧、在 iPhone 15 Pro 上被 Home Indicator 截断——这些不是偶发 bug，是没处理 viewport 变化信号的直接后果。
- 监听
visualViewport?.resize（非 IE），动态重算展开层bottom值：用env(safe-area-inset-bottom)补齐，再减去键盘高度（可通过innerHeight对比估算） - 收起逻辑必须响应
blur+touchstart外部区域 +Escape键，三者缺一不可 - 若页面有
overflow: hidden（比如弹窗遮罩层），展开层会被裁剪，需临时改body.style.overflow = 'visible'并记录原值以便恢复
show() / hide() 都会暴露竞态问题。别急着封装函数，先在每个触发点加 console.log 看实际执行顺序。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
