底部弹出层应使用 position: fixed 而非 absolute 以避免截断，用 transform: translatey(100%) 隐藏并配合 transition 实现流畅动画，遮罩层需阻止事件穿透，显示时禁用 body 滚动以防穿透。
直接用 position: fixed + transform 配合过渡动画就能实现，但关键不在“怎么动”，而在“怎么不卡、不遮挡、不误触”。下面分三块说清楚。
底部弹出层必须用 fixed 而不是 absolute
因为 absolute 会受父容器 overflow: hidden 或 transform 上下文影响，导致弹出被截断或位置偏移；fixed 脱离文档流，始终相对于视口定位，更可控。
实操建议：
- 弹出层根元素设
position: fixed; bottom: 0; left: 0; right: 0;，宽度撑满，避免左右留白 - 加
z-index: 1000;（确保高于所有业务组件，但别设成 9999 —— 后续 modal 叠加会冲突） - 如果页面有 iOS Safari 的地址栏缩放行为，需额外加
min-height: 100vh;防止底部悬空
transform: translateY(100%) 是隐藏的可靠方式
用 display: none 或 visibility: hidden 会导致过渡失效；用 opacity: 0 单独控制又容易误触。最稳的是靠位移隐藏，再配合 transition。
实操建议：
- 默认状态：设
transform: translateY(100%); opacity: 0;，并加transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s; - 显示时：只改
transform: translateY(0); opacity: 1;—— 不要同时 toggledisplay，否则动画中断 - 注意：iOS Safari 对
transform+fixed组合偶有渲染延迟，可加will-change: transform;微调
点击遮罩层关闭时，必须阻止事件穿透到下方按钮
常见错误是只给遮罩层加 click 关闭逻辑，但没处理 touchstart 或 pointer-events，导致手指还没抬起来就触发了底部 Tab 或按钮。
实操建议：
- 遮罩层用
div.overlay，样式加pointer-events: auto;（显式声明，避免继承干扰） - 弹出层内容区域（如按钮列表）用
pointer-events: auto;，遮罩层其余部分保持默认 - 关闭逻辑统一用
touchend+click双监听，并在 handler 里加event.preventDefault(); event.stopPropagation(); - 如果弹出层内有
input或textarea，iOS 键盘弹出会推高视口，此时fixed元素可能错位 —— 需监听resize并重置bottom值
最易被忽略的是滚动穿透：弹出层显示时，背后页面仍可滚动。这不是 CSS 能解决的，得在 JS 显示时给 body 加 overflow: hidden，但记得恢复 —— 尤其是用户按系统返回键或弹窗被异常关闭时，漏掉这步会导致整个页面锁死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
