opacity+transition可实现淡入淡出，但需避开display:none等不可动画属性；因display是离散型属性，浏览器无法插值计算，故transition无效。
直接用 opacity + transition 就能实现，但必须避开 display: none 这类不可动画属性，否则过渡会失效。
为什么 display 切换没过渡效果
display 是离散型属性，浏览器不支持对其做插值计算。哪怕写了 transition: display 0.3s，实际切换时仍是瞬间跳变。
- 常见错误：用
display: none→display: block控制提示框显隐，再加transition期望淡入 - 正确替代：始终让元素在文档流中（如用
visibility: hidden或保持display: block），只动opacity - 若需彻底禁用交互，可叠加
pointer-events: none（配合opacity: 0时）
opacity + transition 的最小可行写法
提示框默认隐藏但保留在布局中，hover 或 JS 触发时改 opacity，靠 CSS 自动过渡：
`.tooltip {
opacity: 0;
transition: opacity 0.2s ease-out;
}
.tooltip.active {
opacity: 1;
}`
-
ease-out比ease更自然，避免“弹出感” - 过渡时间建议 ≤ 0.3s，过长会让用户误判是否生效
- 若提示框含文字，记得同时设
pointer-events: none→pointer-events: auto，防止半透明时仍可点击穿透
需要真正“消失”时怎么收尾
opacity: 0 后元素仍占位、可聚焦、可能被屏幕阅读器读取。若要彻底移除，得靠 JS 在过渡结束后操作：
- 监听
transitionend事件，检查event.propertyName === 'opacity' - 在回调里设
display: none或visibility: hidden（后者更安全，不影响布局重排） - 切勿在
opacity: 0状态下立刻设display: none——这会中断过渡动画
最易被忽略的是：渐隐后若没清理 display 或 visibility，可能造成后续 JS 判断元素是否显示时逻辑错乱，尤其在反复开关的提示框场景里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
