左滑删除效果的核心结构需三层嵌套：外层容器设overflow:hidden，中间层用transform:translateX()位移并加CSS过渡，内层并排布局content与delete-btn，后者需绝对定位、固定宽度、z-index高于content且不受中间层overflow限制。
左滑删除效果的核心结构怎么搭？
左滑删除不是纯 CSS 能独立完成的交互，但视觉层（滑动、遮罩、按钮显示）完全可以由 CSS 驱动，关键在于用 transform: translateX() 控制位移，配合 overflow: hidden 截断超出区域。不要用 left 或 margin-left 做位移——动画卡顿、触发重排、无法硬件加速。
典型 DOM 结构需要三层嵌套：
- 外层容器（.list-item）设 overflow: hidden
- 中间层（.item-wrapper）负责 transform 位移
- 内层（.content 和 .delete-btn）并排布局，.delete-btn 初始右出界
如何让滑动过程平滑且不误触？
移动端 touch 操作容易抖动，直接监听 touchstart/touchmove 手动计算位移会频繁重绘。更稳妥的做法是：只用 CSS 过渡 + JavaScript 控制 class 切换，把位移逻辑交给浏览器合成线程。
- 给
.item-wrapper加transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)—— 这个贝塞尔曲线比ease更跟手 - 滑动阈值设为
80px：小于它就回弹，大于就触发删除态（加deletedclass） - 必须加
touch-action: pan-y到外层容器，否则竖向滚动会被拦截
删除按钮点击区域为什么经常点不中？
常见问题是 .delete-btn 被父级 overflow: hidden 剪掉一部分，或者 z-index 层级被盖住。它必须满足三个条件：
- 宽度固定（比如
width: 80px），不能靠内容撑开 - 绝对定位在右边界：
position: absolute; right: 0; top: 0; bottom: 0; -
z-index必须高于.content，且父级.item-wrapper不能有overflow: hidden（只有最外层容器才该有）
如果用了 Flex 布局，注意 .content 要设 flex: 1，否则 .delete-btn 会被挤变形。
立即学习“前端免费学习笔记（深入）”；
iOS Safari 下滑动卡顿或闪屏怎么办？
iOS Safari 对 transform 的合成优化敏感，尤其当列表项含图片、阴影或复杂背景时。两个硬性修复点：
- 强制开启 GPU 加速：
.item-wrapper { will-change: transform; }，但别滥用，只加在真正会动的元素上 - 避免在
.content里用box-shadow或半透明背景，改用backdrop-filter或纯色 - 如果列表很长，确保每个
.list-item有唯一key（框架场景）或id，防止重绘扩散
真机调试时，打开 Safari 开发者工具 → “Timelines” → 勾选 “Rendering Frames”，看是否持续掉帧——掉帧主因往往是 layout 触发或 paint 区域过大。
