应使用 transform: translateY() 与 opacity 配合 transition 实现 fixed 悬浮条入场动画，避免 display: none 或 height: 0 导致定位异常；需注意 iOS 合成层、will-change 控制、滚动时机节流及 Android 降级兼容。
用 position: fixed + transform 实现入场动画
底部固定悬浮条不能靠 display: none 切换，否则会破坏 fixed 定位的渲染流，导致闪动或位置偏移。正确做法是用 transform: translateY() 配合 opacity 控制初始隐藏与滑入。
- 初始状态设为
transform: translateY(100%); opacity: 0;（完全移出视口底部） - 触发显示时，移除该样式或切换 class，让其过渡到
transform: translateY(0); opacity: 1; - 必须显式声明
transition: transform 0.3s ease-out, opacity 0.3s ease-out;，只写all容易引发重排或意外动画 - 注意：
height: 0+overflow: hidden方案在 fixed 元素上不可靠，部分浏览器会忽略 height 计算
避免 Safari 和 iOS WebView 的 fixed 动画卡顿
iOS 上 position: fixed 元素做 transform 动画时，若父容器有 overflow: scroll 或页面存在软键盘弹出，可能触发合成层失效，导致掉帧。
- 给悬浮条加
will-change: transform;（仅在动画触发前动态添加，动画结束移除，避免长期占用内存） - 确保其不嵌套在
transform、perspective或filter有值的祖先元素内，否则会脱离 viewport 坐标系 - 不要用
top/bottom同时参与动画——iOS 对 fixed 元素的 top/bottom 变化不触发硬件加速 - 测试时用真机 Safari，模拟器常表现正常但实际设备会卡
JavaScript 控制入场时机：滚动到底部才出现
很多场景下希望用户快到底部时再滑入，而不是一进页面就动。关键不是监听 scroll，而是节流 + 判断距底部距离。
- 用
document.documentElement.scrollHeight - window.innerHeight - window.scrollY算剩余可滚动高度 - 当该值 ≤ 200（可根据条高度调整），添加显示 class；大于 300 时隐藏（留缓冲，避免反复触发）
- 别用
onscroll直接绑函数，务必用requestAnimationFrame节流，否则快速滚动时动画会堆积或失步 - 首次进入页面时手动检查一次，防止用户直接跳转到页面中部再下拉
兼容老版本 Android WebView 的 fallback 处理
Android 4.x 的 WebView 对 transform 过渡支持弱，可能出现突兀显示或无动画。需要降级方案：
立即学习“前端免费学习笔记（深入）”；
- 检测是否支持
transform过渡：if (CSS.supports('transition', 'transform 0.1s')) { ... } - 不支持时，改用
setTimeout分两步：先opacity: 0 → 1（无 transition），再visibility: hidden → visible控制显示 - 避免使用
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1)这类高阶贝塞尔——旧 WebView 解析失败会退成 linear，显得生硬
实际最易被忽略的是：动画结束后，transform 值仍保留在元素上，后续 JS 若依赖 getBoundingClientRect() 获取位置，可能因 transform 影响返回值。需要动画完成时清除内联 transform，或统一用 class 控制，避免混用 style 操作。
