Toast提示框通过CSS动画实现顶部滑入滑出，核心是transform: translateY()和opacity配合@keyframes定义三阶段动画，JS控制toast-entering/toast-exiting类名切换触发动画，并用animationend事件精准管理生命周期。
网页通知提示框（Toast）用 CSS 动画实现顶部滑入滑出，核心是控制 transform: translateY() 和 opacity，配合 @keyframes 定义入场和退场过程，并用 JS 控制类名切换来触发动画。
1. HTML 结构：轻量、可复用的提示容器
把提示框放在 末尾，避免布局干扰。每个提示独立渲染，支持多条叠加（靠 margin-top 或 flex 排列）：
操作成功！
2. CSS 动画：定义滑入、静止、滑出三阶段
关键点：入场从 -100% 高度外滑下 + 淡入；停留时保持可见；滑出反向执行。使用 animation-fill-mode: forwards 锁定最终状态：
0% { transform: translateY(-100%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes toastExit {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(-100%); opacity: 0; }
}
.toast {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
min-width: 240px;
padding: 12px 20px;
background: #333;
color: white;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 9999;
opacity: 0;
}
.toast-entering {
animation: toastEnter 0.3s ease-out forwards;
}
.toast-exiting {
animation: toastExit 0.25s ease-in forwards;
}
3. JavaScript 控制：添加 → 等待 → 移除
创建提示后立即加 toast-entering 类；动画结束后（监听 animationend）再加 toast-exiting；滑出完成后再真正移除 DOM：
- 用
setTimeout或animationend事件判断入场完成，开始倒计时（如 3000ms） - 倒计时结束，添加
toast-exiting类，触发退出动画 - 监听
toast-exiting的animationend，移除元素或清空类名 - 建议给每个 toast 绑定唯一 ID 或用
data-timestamp防止动画错乱
4. 进阶优化建议
-
堆叠管理：用 flex 布局的容器 +
flex-direction: column; align-items: center;，每条 toast 设置margin-top: 8px，新提示 prepend 到容器开头 -
手动关闭：在 toast 内加 × 按钮，点击直接触发
toast-exiting -
类型区分：通过 class 如
.toast-success/.toast-error改变背景色和图标，动画逻辑复用 -
性能注意：只对
transform和opacity做动画，避免触发布局重排（top、height等）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
