应避免用 display: none 或 visibility: hidden 配合 opacity 实现淡入动画，而应保持 visibility: visible、仅用 opacity: 0 隐藏，并配合 transform 缓冲；优先使用 CSS @property 定义可动画变量 --menu-opacity 控制透明度，绑定 transition 实现平滑过渡，同时设置 pointer-events 精确控制点击区域。
opacity 动画卡顿？别用 transition-delay 模拟淡入
直接改 opacity 配合 transition 看似简单，但菜单一展开就“闪一下”或延迟感明显，本质是浏览器没触发硬件加速，且初始状态常被设为 opacity: 0; visibility: hidden; —— 这会导致元素不参与渲染流，transition 在 visibility 切换瞬间丢失动画帧。
- 正确做法：初始状态保持
visibility: visible;，仅靠opacity: 0;隐藏，用transform: scale(0.95);辅助视觉缓冲 - 过渡必须绑定在类名切换上（比如
.menu--open），而不是靠 JS 直接写内联样式，否则 CSS 变量无法介入 - 避免写
transition: opacity 0.3s ease;这种宽泛声明，要限定属性：transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
如何用 CSS 变量控制淡入时长和起始透明度
CSS 变量不是为了炫技，而是让同一套菜单组件在不同场景下复用不同动效节奏——比如移动端要更快，后台系统需更柔和。关键在于把动画参数从写死值抽离，但变量不能直接进 transition，得靠 @property 或间接计算。
- 定义可动画变量：
@property --menu-opacity { syntax: "<number>"; inherits: false; initial-value: 0; }</number> - 在菜单元素上用
opacity: var(--menu-opacity);，再配合transition: --menu-opacity 0.25s ease-out; - JS 触发时只改变量：
menuEl.style.setProperty('--menu-opacity', '1');，无需操作 class 或 style.opacity - 注意兼容性：
@property在 Safari 16.4+、Chrome 110+ 支持，旧版本需回退到 class 切换 +:is(.menu--open) { opacity: 1; }
display: none 导致 CSS 变量动画失效？这是最常踩的坑
很多人给菜单加 display: none; 配合 display: block; 控制显隐，结果发现无论怎么改 --menu-opacity，动画都不动——因为 display: none 会让整个元素脱离渲染树，所有样式（包括变量和 transition）全部暂停计算。
- 替代方案：用
visibility: hidden; height: 0; overflow: hidden;封装容器，再用opacity和transform控制子菜单 - 如果必须用
display，那就放弃变量驱动动画，改用 class 切换 +@keyframes，例如：@keyframes menu-fade-in { from { opacity: 0; transform: scaleY(0.8); } to { opacity: 1; transform: scaleY(1); } } - 检查 DevTools 的 “Rendering” 面板，勾选“Paint Flashing”，能看到
display: none元素是否真的被跳过绘制
移动端点击穿透？opacity=0 不等于不可点
菜单设了 opacity: 0; 但还能点到背后的按钮，是因为 opacity 不影响 pointer-events，默认仍是 auto。这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
- 必须配对设置：
pointer-events: none;在隐藏态，pointer-events: auto;在显示态 - 别写成
pointer-events: none !important;—— 后续 JS 动态启用会很难覆盖 - 若菜单含表单控件（如搜索框），建议只对容器设
pointer-events，内部输入框单独设pointer-events: auto; - 测试时用真机点按，模拟器可能忽略 pointer-events 的细微差异
