display是离散属性，无法插值计算，故transition对其完全不触发；应改用opacity+visibility组合，opacity控制视觉渐变，visibility控制交互与占位，并配以transition-delay或step-end协调时机。
直接用 opacity + transition + 定位控制，就能做出真正流畅的悬浮提示，不需要 JS 介入，也不依赖 display: none。
为什么不能用 display: none 触发 transition？
CSS 的 transition 只对可计算中间值的属性生效，display 是离散值（block、none 等），没有“半显示”状态。一旦写成 display: none → display: block，浏览器会跳过过渡直接渲染，动画失效。
-
opacity: 0到opacity: 1是连续数值，天然支持transition - 但
opacity: 0的元素仍占布局空间、能响应鼠标事件——这点常被忽略 - 必须搭配
pointer-events: none和visibility: hidden才算“真正隐藏”
定位要避开父容器 overflow 裁剪
很多淡出卡在半截，不是动画写错了，而是父元素设置了 overflow: hidden，而提示框用了 transform: translateY(-10px) 这类位移。位移后超出父容器边界，就被裁掉了。
- 给提示框加
position: absolute，并确保其最近的非static定位祖先（通常是触发元素）设了position: relative - 避免把提示框放在
overflow: hidden的滚动容器内部 - 如果必须嵌套，改用
top/left定位，而非transform位移（后者更容易触发裁剪）
transition 写法要覆盖 hover 进出两个方向
只写 .tooltip:hover::after { opacity: 1; } 不够——hover 进入时有过渡，但离开时默认回退为无过渡的“硬切”。必须显式声明初始态的 transition。
- 正确写法：
.tooltip::after { opacity: 0; transition: opacity 0.25s ease-out, visibility 0.25s step-end; } -
step-end配合visibility，确保淡出结束瞬间才设为hidden，避免鼠标划过时闪一下 - 不要把
transition写在:hover伪类里，它必须定义在常态规则中
最易被忽略的是：淡出结束时 opacity: 0 的元素依然能挡住点击，哪怕看不见。务必检查是否漏了 pointer-events: none 或 visibility: hidden ——否则用户会点不到底下的按钮或链接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
