fixed元素opacity隐藏时需同步设pointer-events: none，transition应限定为opacity，复杂隐藏建议叠加visibility: hidden并用JS在transitionend中设置，避免混用display。
fixed元素用opacity隐藏时仍占点击区域
直接设opacity: 0会让元素视觉消失，但pointer-events默认仍为auto，用户还能点中它。尤其当它盖在按钮或链接上时，会拦截交互。解决方法是同步控制pointer-events：
- 显示时：
opacity: 1; pointer-events: auto; - 隐藏时：
opacity: 0; pointer-events: none;
注意pointer-events: none不会继承，所以子元素也一并失效——如果需要保留子元素可点击，得单独给子元素设pointer-events: auto。
transition要明确写在opacity上，别只写all
写transition: all 0.3s看似省事，但一旦后续加了transform或top等属性，动画可能意外触发或卡顿。更稳妥的是锁定过渡属性：
element {
opacity: 1;
transition: opacity 0.3s ease-out;
}
同时确保opacity的起始/结束值是数字（0和1），避免用unset或initial导致过渡失效。
立即学习“前端免费学习笔记（深入）”；
结合visibility做“真隐藏”以释放渲染压力
仅靠opacity: 0，元素仍在文档流（对position: fixed不影响）、仍参与布局计算、仍被浏览器渲染。若该元素结构复杂（比如含大量图片或SVG），持续隐藏时建议叠加visibility: hidden：
- 过渡中：保持
visibility: visible+opacity动画 - 完全隐藏后：加
visibility: hidden（配合opacity: 0和pointer-events: none）
注意visibility: hidden本身不支持transition，所以必须用 JavaScript 在transitionend事件里补上，否则会闪一下。
JavaScript切换时避免opacity和display混用
有人习惯用display: none彻底移除，但这会中断transition——因为display不是可过渡属性。一旦设了display: none，opacity动画立即终止，再显示时从头开始。
正确做法是只操作opacity、visibility和pointer-events，用getComputedStyle确认当前状态，再决定是否添加/移除类名：
el.classList.toggle('is-hidden', shouldHide);
// .is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
真正难处理的是响应式场景下fixed元素需随视口缩放重定位——此时opacity过渡没问题，但位置变化得靠transform，而transform和opacity一起过渡时要注意硬件加速是否启用（加will-change: opacity或transform可提示浏览器）。
