Toast必须用position: fixed以脱离文档流、相对视口定位；absolute受父容器transform/overflow影响易消失，relative随滚动移动；需设top/right、z-index≥1000，移动端加will-change: transform防抖动。
Toast提示框为什么必须用position: fixed
因为要脱离文档流、不挤占页面内容，且始终相对于视口定位（比如右下角）。用absolute会受父容器transform或overflow影响，常见表现是Toast突然消失或位置偏移；relative则会随滚动条移动，失去“悬浮”感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
fixed需配合top/right等明确偏移值，不能只写position: fixed就指望它自动居右下 - 务必加
z-index（建议≥1000），否则可能被Modal、Header等遮住 - 移动端要注意
viewport缩放时fixed元素偶尔抖动，可加will-change: transform缓解
渐显渐隐动画怎么用@keyframes写才不闪屏
直接用opacity从0→1再1→0是最稳妥的，避免用display: none或visibility: hidden——它们无法参与CSS动画，会导致“突显突隐”。另外，transform: scale()虽有性能优势，但单独缩放易变形，建议和opacity组合使用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义两段动画：
toast-in（0%→100%：opacity 0→1，transform scale(0.95)→1）和toast-out（0%→100%：opacity 1→0，scale 1→0.95） - 动画时长控制在
0.2s~0.3s之间，太慢显得卡顿，太快用户来不及看清 - 出动画必须用
animation-fill-mode: forwards，否则动画结束瞬间opacity会跳回1，造成闪烁
animationend事件监听后为什么Toast还删不干净
常见错误是只监听一次animationend，但一个Toast可能触发进、出两段动画，而animationend会在每段结束时都触发。如果没判断event.animationName，就会在入场动画结束时误删DOM，导致后续退场动画根本没机会执行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听时检查
event.animationName === 'toast-out'再移除元素 - 移除前先用
element.classList.remove('show')停掉所有动画类，防止重复触发 - 移除DOM后，记得清理绑定的事件监听器（尤其用
addEventListener手动绑定时）
多个Toast叠加时如何避免堆叠错位或z-index混乱
纯靠z-index递增不可靠——不同Toast实例可能同时进入动画，渲染顺序和层叠上下文容易打架。更稳的方式是用一个容器统一管理，新Toast插入到容器顶部，并通过margin-top或transform: translateY()动态推高已有Toast。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有Toast都挂载到同一个
div#toast-container下，该容器设position: fixed; right: 16px; bottom: 16px; - 每个Toast加
margin-bottom: 8px，并用JS计算当前已有几个Toast，给新Toast加style.transform = `translateY(-${count * 56}px)`（56为单个Toast高度） - 避免用
z-index做排序，它只管层叠，不管布局位置
动画结束时机、DOM移除时机、多实例布局这三处，最容易在快速连续触发Toast时暴露问题。别依赖CSS自动收尾，关键节点一定要用JS主动控制。
