bootstrap 原生 toast 不支持手动滑出，需手写 touch 事件监听、css transform 动画及状态管理：记录起始坐标，滑动超阈值（≥50px）调用 toast.hide()，否则回弹；须移除 fade 类、防手势穿透、适配 ios touch-action 与阈值调整。
Toast 手动滑出（swipe-to-dismiss）需要自己实现
Bootstrap 原生 Toast 不支持手势滑出，data-bs-dismiss="toast" 只响应点击，没有 touchmove / touchend 监听逻辑。想让 Toast 支持左右滑出关闭，必须手写事件监听 + CSS 动画 + 状态管理。
常见错误是直接给 .toast 加 touchstart 监听然后移除元素——这会跳过 hidden.bs.toast 事件，且动画生硬、无回弹反馈。
- 必须在
touchstart记录起始 X 坐标，在touchend计算位移：滑动距离 > 50px 且方向明确才触发关闭 - 滑动过程中用
transform: translateX()实时更新位置，不能改left或margin（性能差） - 松手后判断：位移超过阈值 → 执行
toast.hide()；否则用transition回弹到原位 - 要防多次触发：滑动中禁用默认滚动（
e.preventDefault()），但仅限于.toast区域，避免影响页面其他滚动
const toastEl = document.querySelector('.toast');
const toast = bootstrap.Toast.getInstance(toastEl) || new bootstrap.Toast(toastEl);
<p>let startX = 0;
let isSwiping = false;</p><p>toastEl.addEventListener('touchstart', e => {
startX = e.touches[0].clientX;
isSwiping = true;
});</p><p>toastEl.addEventListener('touchmove', e => {
if (!isSwiping) return;
const currentX = e.touches[0].clientX;
const diff = currentX - startX;
// 限制只在 X 轴滑动，且不干扰 Y 轴滚动
if (Math.abs(diff) > Math.abs(e.touches[0].clientY - startY)) {
e.preventDefault();
}
toastEl.style.transform = <code>translateX(${diff}px)</code>;
});</p><p>toastEl.addEventListener('touchend', e => {
if (!isSwiping) return;
const currentX = e.changedTouches[0].clientX;
const diff = currentX - startX;
isSwiping = false;</p><p>if (Math.abs(diff) > 50) {
toast.hide(); // 触发原生 hide，保证动画和事件完整
} else {
toastEl.style.transition = 'transform 0.2s ease-out';
toastEl.style.transform = 'translateX(0)';
setTimeout(() => {
toastEl.style.transition = '';
}, 200);
}
});
</p>
滑出动画与原生 fade 动画冲突怎么办
Bootstrap Toast 默认用 fade 类控制淡入淡出，而滑出是 transform 位移。两者叠加会导致视觉错乱：比如滑到一半突然透明度归零，或滑出后残留半透明残影。
- 必须移除
fade类，改用自定义动画类（如slide-fade），统一控制 opacity + transform - 滑出过程禁用
pointer-events，防止中途点关闭按钮造成状态混乱 - 在
hide.bs.toast事件里重置transform和transition，否则下次 show 会从偏移位置开始 - 注意 iOS Safari 对
transform+opacity同时动画的渲染 bug，建议加will-change: transform
多个 Toast 堆叠时滑出顺序容易错乱
右下角堆叠多个 Toast 时，后弹出的盖在前面，但滑动手势可能误触底层 Toast 的 DOM —— 尤其当上层 Toast 滑出一半、露出下层按钮区域时，用户再滑就关错了。
- 给每个 Toast 加唯一
data-toast-id，滑动监听只绑定当前最顶层可见的 Toast（用getComputedStyle(el).zIndex判断） - 滑动开始时，给当前 Toast 加
data-swiping="true"，其他 Toast 的 touch 事件直接return - 滑出动画结束（
hidden.bs.toast）后，主动调整剩余 Toast 的z-index和bottom值，避免位置重叠 - 不要依赖
overflow: visible解决堆叠遮挡 —— 它只是让按钮不被裁剪，不解决手势穿透问题
为什么 swipe-to-dismiss 在 iOS 上经常失效
iOS Safari 默认对 touchmove 做滚动优化，哪怕你 e.preventDefault()，也可能被系统拦截，导致 transform 更新卡顿或完全不动。
- 必须给 Toast 容器设
touch-action: pan-x（不是none），允许横向拖拽但禁止缩放/纵向滚动 - 避免在
body或html上设置overscroll-behavior: contain，它会干扰局部 touch 事件流 - 滑动阈值提高到 60–80px，iOS 触控精度不如安卓，小幅度滑动易误判
- 真机调试时用
document.addEventListener('touchmove', e => console.log(e), { passive: false })验证是否成功阻止默认行为
滑出交互看似简单，但涉及手势识别精度、动画同步、多实例状态隔离和移动端兼容性，最容易被忽略的是：滑出后没清理 transform 样式，导致下次 show 位置偏移；以及没做 z-index 动态重排，造成后续 Toast 关闭错乱。
