侧滑动画应使用 transform: translatex() 而非 left，以避免强制重排、启用 gpu 加速；需配 transition、will-change、visibility 与 pointer-events 控制显隐，并用 requestanimationframe + 速度估算实现流畅拖拽回弹。
侧滑动画用 transform: translateX() 而不是 left
直接改 left 触发 layout，动画卡顿明显，尤其在低端安卓机上。用 transform 走合成层，GPU 加速，滑起来才跟手。
常见错误是给购物篮容器加 position: relative 后死磕 left 动画，结果手指一松它“啪”一下跳回去——其实是没清 transition 或者没设好初始 left 值。
- 必须给侧滑容器加
will-change: transform（可选，但 iOS Safari 上有时不加就掉帧） -
transform: translateX(-100%)表示完全滑出视口，不是-100px—— 百分比基于自身宽度，更安全 - 别忘了加
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)，这个贝塞尔曲线比ease更接近原生滑动惯性
点击遮罩层关闭时，transform 和 visibility 要配对用
只靠 transform 把篮子滑走，DOM 还在、事件监听还在、甚至还能被屏幕阅读器读到。用户点不到遮罩？大概率是 z-index 没压住，或者遮罩本身 pointer-events: none 漏写了。
典型翻车现场：滑走后立刻 display: none，下一秒再 show，结果动画根本没执行——因为 display 切换会中断 CSS 动画。
立即学习“前端免费学习笔记（深入）”；
- 关闭流程应该是：先触发
transform动画 → 动画结束（监听transitionend）→ 再设visibility: hidden+pointer-events: none - 遮罩层必须有
background-color: rgba(0,0,0,0.5)和pointer-events: auto，否则点不中 - 别用
opacity: 0配pointer-events: none来“隐藏”遮罩，iOS 上偶尔会残留点击穿透
移动端手势拖拽时，touchmove 里别直接改 transform
直接在 touchmove 里反复设 style.transform，容易因 JS 执行阻塞导致拖拽卡顿或跳变。浏览器来不及把每一帧都合成出来。
真实场景下，用户想慢速拖半截、停住、再松手让篮子自动回弹——这需要位置采样 + 速度估算，不是光靠 clientX 差值就能搞定的。
- 用
requestAnimationFrame节流更新transform，不要在touchmove回调里硬写 - 记录上一次
touchmove的时间戳和位置，算出瞬时速度，决定松手后是回弹还是展开 - 拖拽距离建议限制在
0 ~ 80vw之间，超过就截断，避免拖太远导致松手后动画飞出屏幕
IE11 兼容？别费劲了，但得知道它卡在哪
IE11 支持 transform: translateX()，但不支持 cubic-bezier() 里的四参数写法，会退成 ease；更麻烦的是，它对 will-change 解析不稳定，加了反而更卡。
如果真要保 IE11，重点不是让动画多丝滑，而是确保功能可用：滑出/收回逻辑不能崩，遮罩能点，篮子内容不溢出。
- 用 Autoprefixer 编译时明确加
ie >= 11，它会自动补-ms-transform - 别在 IE11 里用
transform: translateX(calc(-100% - 1px))这种组合，calc 在 IE11 的 transform 里支持极差 - 测试时关掉所有开发者工具，IE11 在 devtools 开着时
transform性能会暴跌
侧滑效果看着简单，但拖拽响应、动画衔接、边界判定、无障碍焦点管理，每个点都容易漏测。特别是 Android 微信内置浏览器，touch-action: pan-x 不加的话，横向拖篮子时页面会跟着缩放。
