真正可用的滑入滑出必须是 transform + opacity 双属性协同变化，且需用 @keyframes 显式定义起止状态；滑入和滑出须拆为两个独立动画；定时滑出需 setTimeout 链式控制；iOS Safari 需在滑出时设 pointer-events: none 和 z-index: -1 防点击穿透。
为什么不能只用 transform: translateY() 控制滑入滑出
单独写 transform: translateY(-100%) 到 translateY(0) 看似能实现从顶部滑入，但实际会遇到两个硬伤：一是动画结束时元素仍占据文档流（即使看不见），可能影响下方元素点击；二是没有配合 opacity，入场/出场会显得生硬、缺乏层次感。真正可用的滑入滑出必须是 transform + opacity 双属性协同变化，且需用 @keyframes 显式定义起止状态。
@keyframes 中必须包含 0%、100% 两段关键帧
很多人写成 from/to 就完事，但实际项目中常需在中间插入 20% 或 80% 微调缓动节奏。例如让入场前略停顿、出场末尾加点回弹感。更关键的是：滑入动画和滑出动画必须拆成两个独立 @keyframes，否则无法分别绑定、监听和控制。
推荐写法：
@keyframes toast-in {
0% { transform: translateY(-20px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes toast-out {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(-20px); opacity: 0; }
}
注意：位移值（如 -20px）不是固定值，要根据 Toast 高度动态调整，否则在不同字号或行高下会错位。
立即学习“前端免费学习笔记（深入）”；
定时自动滑出必须用 setTimeout，不能只靠 animation-delay
animation-delay 只能控制动画启动时机，无法在滑入完成后才开始倒计时滑出。真实场景需要「显示 2.5 秒 → 滑出 0.25 秒 → DOM 移除」三阶段，这只能靠 JS 的 setTimeout 链式控制。
- 先加
toast-in类触发出场动画 - 用
setTimeout在2500 + 250毫秒后执行滑出逻辑（2500ms 展示 + 250ms 滑出动画时长） - 滑出前务必先
element.classList.remove('toast-in')，再add('toast-out')，避免类名叠加冲突 - 滑出动画结束必须监听
animationend，且只响应event.animationName === 'toast-out'，否则入场动画结束就误删
移动端 iOS Safari 上滑出后仍有点击穿透
这是最隐蔽也最常被忽略的问题：纯靠 opacity: 0 + visibility: hidden 不够，iOS Safari 对 fixed 元素的合成层处理有缺陷，即使透明了仍会拦截点击。必须在滑出动画结束后，手动设置 pointer-events: none 并将 z-index 降到极低（比如 -1），才能彻底释放底层区域。
更稳妥的做法是：滑出动画一触发，就同步加上 style="pointer-events: none"；动画结束移除元素前，再补一句 element.style.zIndex = '-1'。这个细节不处理，用户点不到 Toast 下方的按钮或链接，问题会直接反馈到产品侧。
