移动端侧滑删除按钮需用 transform: translatex() + transition 实现流畅位移，禁用 left/margin-left 防重排；js 监听 touch 事件判断滑动方向与距离，约束位移范围并用 requestanimationframe 做回弹；删除区设 pointer-events: none，启用硬件加速提升性能。
给移动端侧滑删除按钮添加流畅的位移过渡，核心是用 CSS3 的 transform + transition 组合，配合 JavaScript 控制滑动状态，避免使用 left/right 等触发重排的属性。
用 transformX 实现平滑位移
侧滑露出删除按钮时，不要改元素的 left 或 margin-left，而是用 transform: translateX() 移动整个列表项容器。这个属性只影响绘制层，不触发布局重排，动画更顺滑。
- 默认状态下，列表项
transform: translateX(0) - 用户向左滑动后，设为
transform: translateX(-80px)（数值按删除按钮宽度定） - 配合
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)，比默认 ease 更跟手
绑定触摸事件判断滑动方向与距离
仅靠 CSS 不够，需 JS 监听 touchstart/touchmove/touchend 判断是否为有效侧滑：
- touchstart 记录起始 X 坐标
- touchmove 实时计算横向偏移量，忽略纵向微小移动（如 |ΔY|
- touchend 后，若偏移量 ≥ 60px，就执行最终位移；否则回弹到 0
避免“滑过头”和边界抖动
直接设固定 translateX 容易滑太猛或松手卡顿，建议加约束逻辑：
- 滑动中用
transform: translateX(Math.min(0, Math.max(-120, currentX)))限制范围 - 松手时用
requestAnimationFrame做回弹或吸附动画，比纯 transition 更可控 - 删除按钮区域本身用
pointer-events: none，防止遮挡底层点击，真正可点区域用伪元素或透明 overlay 覆盖
兼容性与性能提醒
老安卓 WebView 可能不支持某些 cubic-bezier 曲线，可降级为 transition: transform 0.3s；同时确保列表项开启硬件加速：
- 加
transform: translateZ(0)或will-change: transform（慎用，只在滑动中动态加） - 避免在滑动过程中读取 offsetLeft 等布局属性，防止强制同步重排
