必须用 position: fixed。否则页面滚动时通知栏会跟着内容跑，失去“始终在顶部”的语义；需避免父容器创建新层叠上下文（如 transform、filter），确保挂载到 下，并显式设置 top: 0、left: 0。
通知栏用 position: fixed 还是 position: absolute？
必须用 position: fixed。否则页面滚动时通知栏会跟着内容跑，失去“始终在顶部”的语义。但要注意：如果父容器用了 transform、perspective 或 filter，会创建新的层叠上下文，导致 fixed 被相对该容器定位，而不是视口——这是最常被忽略的兼容性陷阱。
- 检查祖先元素是否带
transform: translateZ(0)或filter: blur(1px)，有就删掉或换方案 - 确保通知栏直接挂载在
下，避免被中间容器截断定位上下文 - 加
top: 0和left: 0显式声明起始位置，别依赖默认值
滑入动画用 transition 还是 @keyframes？
用 @keyframes 配合 animation。因为 transition 只能响应属性变化（比如从 opacity: 0 → 1），但“从屏幕外滑入”需要同时控制 transform: translateY(-100%) → translateY(0) 和 opacity，而 transition 对 transform 的初始状态不敏感——元素一渲染就处于 translateY(0)，根本没“屏外”这个中间态。
- 定义关键帧：
@keyframes slideInTop { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } - 触发时加类：
element.classList.add('notify-show')，对应.notify-show { animation: slideInTop 0.3s ease-out forwards; } - 别忘了
forwards，否则动画结束瞬间会回退到初始样式
怎么让通知自动关闭又不影响手动关闭？
两个关闭逻辑要解耦：自动关闭走定时器，手动关闭走事件监听，且手动关闭后必须清除定时器，否则可能触发已销毁 DOM 的操作。
- 创建通知时：
const timer = setTimeout(() => el.remove(), 5000) - 绑定关闭按钮：
closeBtn.addEventListener('click', () => { clearTimeout(timer); el.remove(); }) - 更稳妥的做法是把
timer存在元素 dataset 里：el.dataset.timerId = timer.toString()，方便后续查找清理 - 注意：如果通知支持多实例，每个都要独立计时，不能共用一个
setTimeout
移动端 Safari 上动画卡顿或闪一下？
大概率是没开启硬件加速，或者触发了重排。iOS Safari 对 transform + opacity 组合动画最友好，但前提是元素得是合成层。
立即学习“前端免费学习笔记（深入）”；
- 强制提升为合成层：
will-change: transform, opacity，但只在动画开始前加，结束后移除，避免内存浪费 - 别在动画中改
height、padding或文字内容，这些会触发 layout - 如果用了
box-shadow，确保它不随动画变化；动态阴影会导致频繁重绘
复杂点在于：动画触发时机和 DOM 插入顺序要卡准——先插入元素、再加动画类，否则 Safari 可能跳过第一帧。用 requestAnimationFrame 包一层最稳。
