核心是用 transform: translateY() 和 opacity 配合 will-change 实现合成层动画，避免重排；插入后需 requestAnimationFrame 延迟加显示类；多通知用 flex 堆叠；Safari 需加 translateZ(0) 修复。
用 transform + opacity 实现平滑滑入
通知条滑入动画的核心不是靠 top 或 margin 位移，而是用 transform: translateY() 配合 opacity 做合成层动画，避免重排（reflow），保证 60fps。直接改 top 会触发 layout，尤其在频繁添加/移除通知时容易卡顿。
实操建议：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 初始状态设为
transform: translateY(-20px)和opacity: 0，同时加visibility: hidden防止占位 - 触发显示时移除这些样式，并加上
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s - 务必给容器加
will-change: transform, opacity（仅对频繁动画的元素），Chrome/Edge 下能提前升层 - 不要用
@keyframes+animation控制单次滑入——它难控制时机，也不好和 JS 的添加/销毁逻辑对齐
JS 动态插入通知时如何触发动画
DOM 插入后立即应用「显示」样式，浏览器需要一个微任务间隙才能识别“从隐藏到可见”的状态变化，否则动画不触发。常见错误是插完就加 class，结果没动画。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 插入元素后，先
element.classList.add('notification--hidden')，再用requestAnimationFrame或setTimeout(() => ..., 0)延迟一帧加显示类 - 推荐写法：
container.appendChild(noticeEl);<br>requestAnimationFrame(() => {<br> noticeEl.classList.remove('notification--hidden');<br>}); - 如果用
setTimeout，别写setTimeout(..., 1)—— 1ms 不可靠，0就够，它进宏任务队列，已比 DOM 插入晚一轮 - 移除通知时，先加
notification--exiting类触发动画，监听transitionend事件再真正removeChild，避免突然消失
多个通知堆叠时的定位与 z-index 冲突
通知从顶部滑入，但多个同时存在时容易互相遮挡或错位。纯靠 position: fixed + top 值递增不可靠——JS 计算错一个，后续全偏移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 flex 容器包裹所有通知，方向设为
column，并设置gap: 8px，让它们自动堆叠、自适应高度 - 容器用
position: fixed; top: 16px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; - 每个通知自身用
position: relative，不依赖z-index排序——DOM 顺序即渲染顺序 - 避免给通知设
z-index: 9999这类魔数，它可能和模态框、下拉菜单冲突；如需提层，统一用 CSS 变量定义层级基线，比如--z-notification: 100
移动端 Safari 的 transform 动画失效问题
Safari（尤其是 iOS 15–16）对 transform 在 fixed 元素上的动画支持不稳定，可能出现闪动、跳帧或首帧不渲染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制开启硬件加速：给通知元素加
transform: translateZ(0)或backface-visibility: hidden - 避免在
transform中混用单位，比如translateY(-20px)和translateY(-2vh)切换——Safari 对混合单位解析有 bug - 如果仍异常，降级方案：检测
navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')，对 Safari 单独启用top+transition，并加will-change: top - 别依赖
prefers-reduced-motion媒体查询自动关动画——很多用户根本没开这个系统设置，该关还得手动提供关闭开关
