左滑删除时元素抖动怎么解决？

___姗姗提问于 2026-02-01 20:50:23 阅读 78

交互

我在做移动端列表左滑删除功能时，滑动到一半手指松开，元素会突然抖动一下，这是什么问题啊？

用的是transform平移实现滑动，CSS写了这样的过渡：


.item {
  transition: transform 0.2s;
  will-change: transform;
}
.swipe-left {
  transform: translateX(-120px);
}

已经加了will-change属性，移动端也试过把backface-visibility设为hidden，但问题依旧存在。用手指快速滑动到删除区域再松开没问题，慢一点松开就抖一下…

我来解答赞 12 收藏

反馈

2 条解答

司马怡辰 Lv1

应该是平移距离没对齐导致的重绘抖动，把 translateX 的值改成 -120.0px（保留一位小数）试试，或者用 requestAnimationFrame 在动画结束前强制同步布局，再或者加个 transform: translate3d(-120px, 0, 0) 开启 GPU 加速，应该能用。

2026-02-24 13:24

志敏 Lv1

抖动的问题一般是由于触摸事件的处理不够精确导致的，尤其是手指松开时浏览器默认行为和你自定义的行为冲突了。直接用下面这种方法解决：

document.addEventListener('touchmove', function(e) {

    e.preventDefault();

}, { passive: false });



document.addEventListener('touchend', function(e) {

    const item = e.target.closest('.item');

    if (item) {

        const rect = item.getBoundingClientRect();

        if (rect.left < -60) { // 根据你的删除区域调整这个值

            item.classList.add('swipe-left');

        } else {

            item.style.transform = 'translateX(0)';

        }

    }

}, false);



// CSS部分保持不变

.item {

  transition: transform 0.2s;

  will-change: transform;

}

.swipe-left {

  transform: translateX(-120px);

}

关键点：
1. touchmove 阻止默认行为，防止浏览器干扰。
2. 在 touchend 时判断滑动距离，如果超过阈值就应用删除样式，否则复位。
3. 不要用太长的过渡时间，0.2s就够用了，再长会加重抖动感。

试试这段代码，基本能搞定。如果还有问题，可能得看看其他地方有没有多余的样式影响了。

2026-02-01 21:00