Popover动画必须用opacity+transitionend事件控制，因display/visibility不可过渡；正确做法是初始opacity:0+pointer-events:none，显示时设opacity:1并监听transitionend恢复交互。
popover 的显示/隐藏动画不能只靠 display 或 visibility 配 transition，必须用 opacity + 事件回调收尾，否则动画会“啪”一下中断。
为什么 popover 加了 transition 还是瞬显瞬隐？
根本原因是：多数 popover 实现（包括 Bootstrap、Element Plus）在显示逻辑里直接操作了 display 或 visibility。哪怕你写了 transition: opacity 0.25s，只要 JS 里执行了 el.style.display = 'block' 或 el.classList.add('show') 且该 class 包含 display: block，浏览器就会立刻丢弃所有过渡帧。
常见错误现象：
- 鼠标悬停弹出时无动画，直接“闪现”
- 移开后有淡出，但入场没动画（说明只在隐藏态写了 transition）
- Safari 下偶现卡顿或首帧跳变
真正起作用的只有可插值属性：opacity、transform、color 等。display 和 visibility 是离散值，无法渐变。
立即学习“前端免费学习笔记（深入）”；
正确做法：opacity 控制视觉，JS 控制占位与交互
Popover 容器元素必须始终保留在 DOM 中、不脱离文档流，仅靠视觉属性变化触发过渡。关键三步：
- 初始状态设
opacity: 0+pointer-events: none+transition: opacity 0.25s ease-out - 显示时只改
opacity: 1（通过 class 切换或el.style.opacity = '1'） - 监听
transitionend事件，在回调里加pointer-events: auto；如需彻底释放占位，再设display: none（仅在隐藏流程中）
示例 CSS：
.popover {<br> opacity: 0;<br> pointer-events: none;<br> transition: opacity 0.25s ease-out;<br>}<br>.popover.show {<br> opacity: 1;<br> pointer-events: auto;<br>}
注意：.show 里绝不能出现 display: block 或 visibility: visible —— 它们会破坏过渡。
兼容性与性能细节不能漏
不同框架对 popover 的底层控制粒度不同，容易踩坑的地方集中在：
-
Bootstrap 5：默认用
show/hide类控制display，需覆盖其 CSS 并禁用原生 transition，改用自定义类 + JS 监听 -
Element Plus：
el-popover的visible是 v-model，它内部会切display；建议用teleported=false+ 手动控制子元素的opacity，或封装一层 wrapper -
Safari 卡顿：加
will-change: opacity到 popover 容器，但别全局加——每个 popover 都设会抬高内存占用 -
键盘可访问性：
opacity: 0的 popover 仍会被屏幕阅读器读取，需同步控制aria-hidden="true/false"
隐藏后元素还在“捣乱”，这是最常被忽略的点
opacity: 0 不等于“消失”。它依然响应鼠标、影响 tab 键顺序、撑开父容器高度。如果你没在 transitionend 后补上 pointer-events: none 和（必要时）display: none，用户可能误点到透明 popover 上，或者表格行高被莫名撑开。
更隐蔽的问题是：多个 popover 同时存在时，z-index 层叠和 focus 状态容易混乱。解决办法不是堆 CSS，而是严格按“视觉 → 交互 → 占位”三阶段收尾，并确保每次只激活一个实例。
