纯css实现toast顶部弹入+淡出可行，但须放弃自动堆叠与动态避让；必须用@keyframes定义transform位移与opacity变化，配合position:fixed和显隐类切换，禁用top动画以防掉帧。
纯 CSS 实现 Toast 从顶部弹入+淡出是可行的，但必须放弃“自动堆叠”和“动态高度避让”，只做单条、固定高度、不依赖 JS 计算位置的动画。关键在于 @keyframes 控制初始位移与透明度，配合 position: fixed 和显隐类切换。
为什么不能只用 transition 实现“从顶部滑入”
因为 transition 只响应属性变化，而元素一挂载就处于最终状态（top: 16px; opacity: 1），没有“屏外→屏内”的起始帧。浏览器不会凭空补出一个 top: -60px 的初始态——除非你手动设好初始样式并靠 JS 切换类名触发过渡。
常见错误现象：.toast { transition: top 0.3s; } + 直接渲染元素 → 动画完全不播放，直接显示在目标位置。
实操要点：
- 必须为未激活态定义明确的初始样式（如
top: -60px; opacity: 0;） - 用 JS 添加
.show类来触发top: 16px; opacity: 1;的过渡 - 若想免 JS，只能用
@keyframes配合animation，但需注意：动画无法响应“关闭”事件，淡出得另写反向动画或靠 JS 移除类
@keyframes 滑入 + 淡出动画怎么写才不卡顿
要避免布局抖动和重绘开销，动画属性必须限定在合成层（transform 和 opacity）。不要对 top 做关键帧动画，尤其在移动端容易掉帧。
推荐写法（使用 transform 替代 top）：
@keyframes toast-in {
from {
transform: translateY(-100%) scale(0.95);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
@keyframes toast-out {
from {
transform: translateY(0) scale(1);
opacity: 1;
}
to {
transform: translateY(-100%) scale(0.95);
opacity: 0;
}
}
.toast {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
animation: toast-in 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: 1000;
}
.toast.closing {
animation: toast-out 0.25s forwards;
}
注意点：
-
forwards必须加在toast-out上，否则动画结束后元素会跳回原位置 -
cubic-bezier选缓动曲线比ease更自然，避免机械感 - 不要给
.toast设display: none，它会中断动画；改用visibility: hidden; height: 0; overflow: hidden;或靠 JS 移除节点
position: fixed 定位到顶部时，为什么有时会偏移或被遮挡
不是所有“顶部”都等于视口顶部。常见偏移原因有二：父容器设置了 transform（如 scale、translateZ），或页面存在 scroll-padding-top / padding-top 的全局布局影响。
实操建议：
- 确保
.toast直接挂载在下，不嵌套在任何带transform的容器里（比如某些 UI 框架的 Layout 包裹器） - 用
top: env(safe-area-inset-top, 0)兼容刘海屏，而不是死写top: 0 -
z-index至少设为1000，否则可能被.modal-backdrop、.header等覆盖 - 如果页面用了
scroll-behavior: smooth，部分浏览器下 fixed 元素在滚动瞬间会短暂错位，加will-change: transform可缓解
多个 Toast 同时出现时，纯 CSS 能否自动堆叠
不能。CSS 本身没有“读取兄弟元素高度并累加 top 值”的能力。所有 fixed 元素彼此独立，共享同一坐标系，不感知其他元素的存在。
如果你强行用 CSS 计数器（counter-increment）或 :nth-child 来控制位置，会立刻暴露两个问题：
- 计数器无法响应 DOM 动态增删，新增/关闭 toast 后顺序错乱
-
:nth-child(n)依赖 DOM 顺序，但 JS 插入节点时若没严格按显示顺序 append，就会漏算或倒置
所以，真要堆叠，JS 是绕不开的：监听新增节点 → 过滤掉 .closing 状态 → 用 getBoundingClientRect().height 算真实高度 → 设置当前 toast 的 top 值。纯 CSS 方案只适合单条、不叠加、不交互的轻量提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
