CSS项目实战之简单的购物篮侧滑效果_位移动画练习

侧滑动画应使用 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 不加的话，横向拖篮子时页面会跟着缩放。