通知提示条（Toast 消息组件动画源码，带倒计时进度条）

效果演示（真实可交互）

通知提示条（Toast）是表单提交、操作反馈里最常用的微交互：不用打断当前流程，在角落轻声告知结果。演示区有四个触发按钮，分别弹出成功、错误、警告、信息四种提示。点击后提示条从右下角弹性滑入，左侧带彩色圆角图标，底部有一条与类型同色的倒计时进度条，4 秒内从满到空，归零后提示条淡出消失；也可以点右上角的 × 立即关闭。连续点击多个按钮会向上堆叠，最多自然展示多条，互不干扰。全部提示条由 JS 动态创建，接入项目时只需调用 show('success') 一行即可。提示条文案、图标与配色都集中在 MAP 配置对象里，新增一种类型只需补一条记录。四个类型分别覆盖成功、失败、告警与普通信息四种情绪，颜色语义与常见设计系统一致，用户无需额外学习成本。提示条的最佳实践是「不打断、可追踪、可关闭」：不抢焦点、倒计时可见、随时手动关闭，三条都满足后，用户对异步操作结果的信任感会明显提升。

完整代码

HTML：页面只需要四个触发按钮，提示条由 JS 注入到固定定位的层容器：

<button class="nt-btn nt-success" data-type="success">成功通知</button>
<button class="nt-btn nt-error" data-type="error">错误通知</button>
<button class="nt-btn nt-warn" data-type="warn">警告通知</button>
<button class="nt-btn nt-info" data-type="info">信息通知</button>

CSS：层容器固定在右下角，倒序堆叠；提示条用弹性缓动滑入：

.nt-layer { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column-reverse; gap: 12px; z-index: 9999; }
.nt-toast {
  display: flex; align-items: center; gap: 12px; min-width: 280px;
  padding: 13px 14px 15px; border-radius: 14px; background: #fff;
  box-shadow: 0 12px 32px rgba(20,30,70,.22);
  animation: nt-in .45s cubic-bezier(.34,1.3,.64,1);
}
@keyframes nt-in { from { opacity: 0; transform: translateX(60px) scale(.9); } }
.nt-toast.nt-out { animation: nt-out .35s ease forwards; }
@keyframes nt-out { to { opacity: 0; transform: translateX(40px) scale(.9); } }

/* 倒计时进度条：scaleX 从 1 收到 0，时长与自动消失一致 */
.nt-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  transform-origin: left; animation: nt-bar 4s linear forwards; }
@keyframes nt-bar { to { transform: scaleX(0); } }

原生 JS：动态创建提示条、绑定关闭、定时自动消失：

const MAP = {
  success: { icon: '✓', color: 'success', text: '操作成功，数据已保存' },
  error:   { icon: '✕', color: 'error',   text: '请求失败，请稍后重试' },
  warn:    { icon: '!',  color: 'warn',   text: '请注意，余额即将不足' },
  info:    { icon: 'i',  color: 'info',   text: '有新版本组件已发布' },
};

function show(type) {
  const cfg = MAP[type];
  const toast = document.createElement('div');
  toast.className = 'nt-toast';
  toast.innerHTML = `
    <span class="nt-icon nt-icon-${cfg.color}">${cfg.icon}</span>
    <span>${cfg.text}</span>
    <button class="nt-close">×</button>
    <span class="nt-bar" style="background:${barColor(cfg.color)}"></span>`;
  layer.appendChild(toast);

  toast.querySelector('.nt-close').addEventListener('click', () => dismiss(toast));
  setTimeout(() => dismiss(toast), 4000);   // 与进度条 4s 同步
}

function dismiss(toast) {
  toast.classList.add('nt-out');
  setTimeout(() => toast.remove(), 360);
}

参数说明

兼容性与性能

• 原生 JS 零依赖，document.createElement + 内联样式即可运行，Chrome / Firefox / Safari / Edge 全支持
• 入场与出场都是合成器属性（opacity/transform），进度条用 scaleX 动画，无布局抖动
• 每个提示条独立计时与销毁，DOM 不会累积；连续弹出多条时容器自动堆叠
• 关闭按钮是真实 <button>，读屏可聚焦；提示文案建议同时输出到 aria-live 区域以增强无障碍
• 提示条容器只在首次弹窗时创建一次，后续复用；每个提示条用完即销毁，内存不会累积。若需要在页面跳转后仍展示，可把容器挂到 body 并配合路由守卫按需清理

常见问题

Q: 提示条太多会怎样？ 会一直向上堆叠直到屏幕占满。生产环境建议加数量上限（如最多 5 条），超出时自动移除最早一条。

Q: 想改成顶部弹出？ 把 .nt-layer 的 right/bottom 改为 top: 20px; left: 50%; transform: translateX(-50%)，并把入场动画的 translateX 改成 translateY(-60px)。

Q: 点击提示条本身要触发跳转？ 给 .nt-toast 绑定 click 事件并设置 cursor: pointer，同时保证关闭按钮 stopPropagation，避免点关闭时误触跳转。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名。