Bootstrap 5 Toast 默认无动画，需手动添加.transition和transform位移控制；推荐用.toast-slide-in类配合opacity与transform双过渡，并在DOM挂载后通过requestAnimationFrame添加.show类以确保动画正确触发。
Bootstrap 5 的 Toast 默认不带动画，必须手动加 CSS 类
Bootstrap 5 的 Toast 组件默认是静态显示的，即使你调用 toast.show()，也不会自动滑入。它依赖 .show 类触发动画，但这个类本身不带任何过渡效果 —— 动画逻辑完全交由你补充。
常见错误是只写 直接改 下面这段 CSS 可直接放入 如果 toast 是动态插入 DOM（比如用 iOS Safari 对 动画细节很容易被当成“小问题”忽略，但用户对提示反馈的流畅感极其敏感 —— 滑入慢一拍、起始位置偏移、iOS 上突然卡住，都会削弱信任感。真正难的不是写出第一版动画，而是让所有设备、所有上下文都稳稳跑起来。transition 和位移控制（比如 transform: translateY）。
.toast 添加 transition 属性，推荐 transform .3s ease-out
transform: translateY(100%) 或 translateY(1rem)，让 toast 落在视口下方.show 类里要覆盖为 transform: translateY(0)，触发滑入opacity: 0 / opacity: 1 配合，否则可能闪现怎么写兼容性好、不干扰 Bootstrap 原生行为的动画 CSS
.toast 全局样式风险高，尤其当项目里混用 Toast 和 Offcanvas、Modal 时，容易误触。稳妥做法是定义专属类名，比如 .toast-slide-in，然后只对它加动画规则。 或自定义 CSS 文件中，不影响其他组件：.toast-slide-in {
opacity: 0;
transform: translateY(1rem);
transition: opacity .3s ease-out, transform .3s ease-out;
}
.toast-slide-in.show {
opacity: 1;
transform: translateY(0);
}
1rem 而非固定像素（如 20px），适配不同字体缩放和响应式场景opacity 和 transform，避免视觉突兀visibility: hidden 初始态 —— 它不参与重排，会导致 getBoundingClientRect() 获取位置异常，影响 JS 定位逻辑JS 初始化时怎么确保动画从正确位置开始
document.createElement 创建），又没等父容器渲染完成就加 .show 类，浏览器可能还没计算好初始 transform 偏移，导致动画起点错位或直接跳过。
.show 类 —— 不要连写 el.classList.add("show") 在 append 前requestAnimationFrame 延迟一帧再加 .show
const toastEl = document.getElementById("myToast");
document.body.appendChild(toastEl); // 确保已挂载
requestAnimationFrame(() => {
toastEl.classList.add("show", "toast-slide-in");
});
Toast 构造器（new bootstrap.Toast(...)），它不会自动加自定义动画类，你得手动在 show() 前补上 .toast-slide-in
移动端 Safari 上滑入卡顿或失效？检查这三点
transform + transition 组合特别敏感，尤其当父容器有 overflow: hidden、或 toast 本身有 backdrop-filter、或页面启用了 transform: translateZ(0) 强制 GPU 加速时，容易丢帧甚至冻结动画。
.toast-container）没有 overflow: hidden —— 它会裁剪掉初始 translateY(1rem) 的位置filter 或 backdrop-filter，它们会破坏合成层，让动画降级到 CPU 渲染will-change: transform 替代 translateZ(0)，且仅在 .show 状态下设置（防止常驻开销）
