transition opacity 未生效最常见原因是 display: none 不支持过渡，应改用 visibility: hidden + opacity: 0；tooltip 跳动需保持元素始终在流中并统一 top/left；hover 闪退要消除间隙并加 transition-delay；移动端失效可加 will-change 或 js 控制。
transition opacity 为什么没生效
最常见的原因是元素默认是 display: none，而 display 不支持过渡动画。哪怕你写了 transition: opacity 0.2s，只要切换的是 display，opacity 就不会动。
- 改用
visibility: hidden+opacity: 0控制隐藏，两者都可被transition捕获 - 确保初始状态和目标状态都设置了
opacity（比如从opacity: 0→opacity: 1） - 别漏掉
transition的触发属性：必须写全transition: opacity 0.2s ease-in-out，不能只写transition: 0.2s
Tooltip 显示/隐藏时位置跳动怎么办
opacity 过渡只管透明度，不管定位。如果 tooltip 是用 position: absolute 且依赖 top/left 动态计算，但又在 display: none 时被移出布局，那显示瞬间会“闪一下”——因为浏览器要重新测量位置。
- 保持元素始终在文档流中：用
visibility: hidden; opacity: 0; pointer-events: none;隐藏，而非display: none - 确保
top/left值在隐藏/显示前后一致（避免 JS 动态重算导致偏移） - 如果用了
transform: translateY(-5px)等微调，也要加进transition：例如transition: opacity 0.2s, transform 0.2s
hover 触发的 Tooltip 如何避免闪退
鼠标从触发元素移到 tooltip 上时，如果两者之间有空隙，:hover 状态会中断，tooltip 立刻开始 fade out，造成闪烁或消失过快。
- 给触发元素和 tooltip 之间加一个「连接区」：用
margin或伪元素桥接，或者把 tooltip 的margin-top设为负值，紧贴触发元素下沿 - 加一点延迟防误触：
transition-delay: 0.1s入场，transition-delay: 0.05s出场（注意：delay 是针对整个 transition，不是单独 opacity） - 更稳妥的做法是用 JS 控制显隐，监听
mouseenter/mouseleave并加防抖，但纯 CSS 场景优先调间隙和延迟
移动端点击显示 Tooltip 时 transition 失效
部分 iOS Safari 和旧版 Android 浏览器对 opacity 过渡在非 :hover 触发场景下支持不稳定，尤其配合 visibility 切换时容易卡顿或跳变。
- 强制开启硬件加速：
transform: translateZ(0)或will-change: opacity（慎用，仅在必要时加） - 避免在
:active中直接切状态，改用 JS 添加 class，再由 class 控制 opacity - 检查是否同时设置了
pointer-events: none—— 它会让元素无法接收后续事件，导致状态无法更新
真正麻烦的不是写几行 transition，而是得同时稳住定位、事件流、渲染层和用户交互节奏。稍一松动，平滑就变成抽搐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
