CSS动画实现侧边滑入通知面板的核心是用transform: translateX()移出视口并配合transition，禁用display:none或visibility:hidden；JavaScript控制显隐需防重复触发、滚动穿透及动态插入DOM导致的掉帧。
用 CSS 动画 + JavaScript 控制 transform 实现侧边滑入通知面板
核心就一条：别用 display: none 或 visibility: hidden 做初始隐藏，否则动画无法触发。必须让元素始终在文档流中，靠 transform: translateX() 移出视口，再用过渡或动画拉回来。
- 初始状态设为
transform: translateX(100%)（右滑出）或translateX(-100%)（左滑出），配合transition: transform 0.3s ease-out - 触发显示时，移除偏移类或切换 class，让
transform: translateX(0)生效 - 面板宽度建议用
max-width限制（如max-width: 400px），避免在小屏上撑满 - 若用
position: fixed，记得加top: 0; right: 0;（右侧）或left: 0;（左侧），并设height: 100vh保证高度
<div id="notify-panel" class="panel-hidden"> <div class="panel-content">新消息：订单已发货</div> </div>
JavaScript 控制显隐时，注意事件绑定和重复触发问题
showNotifyPanel() 和 hideNotifyPanel() 函数本身很简单，但容易忽略两个实际场景：
- 用户快速连续点击触发按钮，可能造成多次
classList.add("show")，虽无害，但若后续加了「只允许一个面板打开」逻辑，就会混乱 - 关闭操作若依赖点击外部区域（
clickondocument），需用event.target === panel或!panel.contains(event.target)判断是否点在面板外，否则点面板内部也会关闭 - 若通知需要自动关闭，用
setTimeout调用classList.remove("show")即可，但记得在手动关闭前clearTimeout，避免冲突
示例节选：
const panel = document.getElementById('notify-panel');
let autoCloseTimer;
<p>function showNotifyPanel() {
panel.classList.add('show');
clearTimeout(autoCloseTimer);
autoCloseTimer = setTimeout(() => {
panel.classList.remove('show');
}, 5000);
}</p><p>document.addEventListener('click', (e) => {
if (!panel.contains(e.target) && e.target.id !== 'notify-toggle') {
panel.classList.remove('show');
}
});</p>移动端适配要防 touch 误触和滚动穿透
iOS Safari 和部分安卓浏览器下，侧边面板展开时若内容超长，用户试图滚动面板，却可能触发背景页面滚动（即“滚动穿透”）：
立即学习“前端免费学习笔记（深入）”；
- 展开面板时，给
<body>加style="overflow: hidden"，收起时恢复；注意保存原有scrollTop，否则收起后页面会跳回顶部 - 不要用
touchmove: preventDefault()直接拦截，它会影响面板内滚动条行为 - 真实测试发现：如果面板用了
position: fixed且未设overscroll-behavior: contain，iOS 上拖拽面板边缘仍可能触发背景滚动。补上这句样式能有效抑制：overscroll-behavior-y: contain
通知内容动态插入时，避免反复重排导致动画卡顿
每次调用 innerHTML = ... 插入新通知，若结构复杂或含图片，会强制同步重排（reflow），尤其在动画进行中，可能让滑入帧率掉到 30fps 以下：
- 推荐用
document.createElement+appendChild构建单条通知项，再一次性挂载到容器 - 所有通知列表容器用
will-change: transform提前提示浏览器该元素将动画，提升合成层优先级 - 如果通知数量多（比如 > 20 条），别全量渲染，用虚拟滚动或只保留最近 5 条 + “查看更多”入口，否则初始
transform动画会明显延迟
侧边通知看似简单，真正上线后最常出问题的不是动画逻辑，而是 body 滚动锁没处理好、iOS 上 overscroll 行为失控、以及动态插入大量 DOM 导致的掉帧——这些细节不测真机很难发现。
