别用 height 过渡，应使用 transform + opacity 配合 transitionend 清理 dom；因 height: auto 无法插值，max-height 易截断内容；关闭后需监听 transitionend 再移除 dom 并处理可访问性；小屏布局需防 flex 收缩、文字溢出及 body 高度补偿。
直接结论：别用 height 过渡，用 transform + opacity 配合 transitionend 清理 DOM，否则动画卡顿、文字截断、关闭后点击穿透全都会出现。
为什么 height: 0 → height: auto 动画会失败
CSS 无法对 height: auto 做插值计算，浏览器要么跳变、要么完全不动。很多教程写 max-height 替代，但 max-height 值得预设（比如 max-height: 200px），一旦内容超长就会被截断，小屏下尤其明显。
- 初始状态设
transform: translateY(-20px); opacity: 0; visibility: hidden; - 显示时加类：
transform: translateY(0); opacity: 1; visibility: visible; - 过渡只写
transition: opacity 0.25s ease, transform 0.3s ease;，不碰height或max-height
关闭后 DOM 还在，导致点击穿透和焦点错乱
仅设 display: none 或 visibility: hidden 不行：前者元素还在 DOM 中（只是不可见），后者仍拦截鼠标和键盘事件。用户关掉通知栏后点下方按钮没反应，大概率是这个原因。
- 推荐流程：点击关闭 → 添加
notification--hiding类触发动画 → 监听transitionend事件 → 在回调里调用banner.remove() - 必须给每个横幅加唯一
id（如id="top-banner-1"），否则多个通知共用一个监听器会互相干扰 - 移除前确保调用
aria-hidden="true"或移除role="alert"，避免屏幕阅读器继续播报已销毁节点
小屏下文字溢出、按钮错位、高度忽高忽低
根本不是字体或 padding 问题，而是 flex 子项默认收缩行为 + Safari/IE 对 flex: 1 支持不稳定。中英文混排时更明显。
- 文字容器加
flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 关闭按钮加
flex-shrink: 0;，防止被压缩变形 - 横向布局别依赖
gap（iOS Safari 14.1 以下不支持），改用margin-left: auto推右 - 媒体查询中同步调整
padding和font-size，否则窄屏下文字贴边甚至被截断
最常被忽略的是高度动态变化后的 body 布局补偿——横幅高度随内容伸缩，body.style.paddingTop 必须实时读取 banner.offsetHeight 更新，而不是写死一个像素值。否则横幅收起后页面会突然上跳一截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
