左滑删除需用transform+transition协同JS手势控制：touchstart记录起点，touchmove实时更新translateX值，touchend判断阈值并分离回弹/删除动画，禁用click防延迟，用ontouchstart+CSS class实现视觉反馈。
transition 配合 transform 实现左滑删除的边界条件
左滑删除不是单纯加个 transition 就能动起来，关键在「触发时机」和「可交互范围」。必须用 transform: translateX() 移动元素，且过渡属性只能写 transform 或 all（但 all 有隐式重排风险）。transition 要写在默认状态上，不是 hover 或 active 里——否则手指松开瞬间会闪回。
- 过渡时间建议 0.25s–0.35s：
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);（比默认 ease 更跟手） - 不能对
left/right做 transition：会引起 layout，滑动卡顿明显 - 容器需设
overflow: hidden，否则滑出部分会撑开布局或显示溢出内容
touchstart + touchmove + touchend 的位移计算逻辑
纯 CSS 无法响应手势拖拽，必须靠 JS 记录触摸偏移。核心是把手指滑动距离映射为 transform: translateX() 的实时值，而不是等松手才跳转——否则体验像“抽帧动画”。
- 在
touchstart记下touches[0].clientX -
touchmove中计算 delta = 当前 X - 起始 X，限制最大左滑距离（比如 -120px） - 直接设置
element.style.transform = `translateX(${delta}px)`，不操作 class -
touchend再判断是否超过阈值（如 -60px），决定是回弹还是触发删除
回弹动画与删除动作的分离处理
用户松手后，元素该回弹还是删除，不能靠 CSS transition 硬切——因为 transform 值已被 JS 动态覆盖，CSS 规则失效。得用 JS 控制最终状态，并用 getComputedStyle 或 requestAnimationFrame 衔接动画。
- 删除时：先加
class="deleting"，里面定义transform: translateX(-120px)和transition，再用offsetHeight强制 reflow 触发 - 回弹时：直接设
element.style.transform = ""（清空内联样式），让 CSS 默认值接管 - 避免在
touchend里直接调remove()：要等动画结束（监听transitionend），否则 DOM 突然消失会导致动画中断
移动端 click 延迟与 :active 伪类失效问题
左滑区域如果同时绑了 click 事件（比如删按钮），iOS Safari 会有 300ms 延迟；而 :active 在 touch 操作中基本不触发，导致视觉反馈丢失。
立即学习“前端免费学习笔记（深入）”；
- 禁用缩放：
<meta name="viewport" content="width=device-width, user-scalable=no">是必要前提 - 删按钮用
ontouchstart替代onclick，并加preventDefault()防止滚动干扰 - 视觉反馈改用 JS 切 class：
element.classList.add("pressed")，配合 CSS.pressed { opacity: 0.7; } - 不要依赖
:active控制滑动状态——它和 touch 流程不同步，容易误判
左滑删除真正难的不是动效，而是 touch 坐标、transform 值、CSS 过渡时机这三者的毫秒级协同。稍有错位，就会出现“滑一半卡住”“松手不响应”“删了但动画没播完”这类问题。
