底部弹窗动画需设position: fixed/absolute并用transform替代bottom；transition须写在基础类中，避免display: none和强制重排，iOS建议用translateY触发硬件加速。
bottom值变化必须配合position: fixed或absolute
直接对bottom用transition却没动起来？大概率是元素没脱离文档流。CSS的transition只对可动画属性在“有明确起止值”的前提下生效，而bottom在position: static（默认）下根本无效，浏览器直接忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 弹窗容器必须设
position: fixed（推荐）或position: absolute - 初始状态设
bottom: -300px（或大于自身高度的负值），让弹窗完全藏在视口外 - 显示时改为
bottom: 0，transition才会有“从-300px到0”的计算过程 - 别用
display: none切状态——它会让元素瞬间消失，中断transition；改用visibility: hidden+opacity: 0组合更稳妥
transition写在默认态，不是hover或active里
很多人把transition: bottom 0.3s ease写在.modal.show类里，结果只有“出现”有动画，“收起”却啪一下消失。这是因为transition需要在两个状态都存在时才能双向生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
transition声明放在弹窗的**基础类**（比如.modal）上，而不是仅在显隐切换类里 - 确保
bottom在两种状态下都有具体数值（例如bottom: -300px→bottom: 0），不能一边是bottom: auto或未定义 - 如果用JS控制class切换，记得class移除和添加之间不要有强制重排（如读取
offsetHeight），否则可能跳过过渡
移动端iOS Safari的bottom动画卡顿问题
iOS Safari对bottom动画的渲染优化较差，尤其在键盘弹出/收起后，常出现首帧卡顿、动画掉帧，甚至直接跳到终点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加
transform: translateZ(0)或will-change: bottom（慎用，可能引发内存问题）触发硬件加速 - 更可靠的做法：改用
transform: translateY()代替bottom——初始transform: translateY(100%)，显示时transform: translateY(0) - 避免同时动画多个属性（比如
bottom+opacity+scale），iOS对复合transition响应更慢 - 测试时务必真机连接Safari开发者工具，看Timeline里是否有“Raster”或“Paint”长任务
JS控制显隐时，class切换要避开重排陷阱
用JS给弹窗加show类后，如果紧接着读取getBoundingClientRect()或offsetTop，浏览器会强制同步布局，导致transition被跳过，弹窗直接闪现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显隐操作分两步：先加class（触发样式变更），再用
requestAnimationFrame读取布局 - 示例：
modal.classList.add('show'); requestAnimationFrame(() => { modal.offsetHeight; // 强制重排，但已确保transition已注册 }); - 如果用
setTimeout(..., 0)替代requestAnimationFrame，在低端安卓机上可能仍失败，优先选RAF - 隐藏时同理：先移除
show类，再等transitionend事件后真正销毁DOM或清空内容
bottom本身不是性能友好的动画属性，尤其在混合输入法、滚动、页面缩放等场景下，稍不注意就会在iOS或低端Android上失守。最稳的路径其实是绕开bottom，用transform驱动——它不触发重排，兼容性好，连IE10都支持。 
