opacity动画需显式声明transition或animation才能生效，@keyframes必须明确起止值0和1，配合forwards填充模式及visibility:hidden实现真正淡出。
直接用 opacity 配合 @keyframes 是最稳妥的淡入淡出方案，但关键不是“能不能做”，而是“怎么避免常见失效和闪烁”。
opacity 动画必须配合 transition 或 animation 才生效
opacity 本身只是静态样式，设成 0 或 1 不会自动过渡。要动起来，得显式声明动画行为：
- 用
transition: opacity 0.3s ease;+ JS 切换 class（适合点击触发） - 用
animation: fade-in 0.3s ease;+@keyframes（适合页面加载或定时播放） - 别只写
opacity: 0;就以为会淡出——没动画声明，就是硬切
@keyframes 中 opacity 必须从 0 到 1 或反向，不能省略起止值
常见错误是写成 from { opacity: 0; } to { }，to 空着会导致浏览器按默认值（通常是 1）补全，但部分旧版 Safari 会卡在 0 不动。稳妥写法：
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
- 数值必须是
0和1（或0.0/1.0），写0%100%也行，但别混用单位 - 不要用
transparent替代0——opacity只接受数字，transparent是color或background的值
淡出后元素仍占布局空间，需要配合 visibility 或 display 控制
opacity: 0 只是看不见，元素还在文档流里，可能挡住下方内容或影响点击区域。真正“消失”要加一层控制：
- 淡出结束时用
visibility: hidden;（保留尺寸，不响应交互） - 或用
display: none;（彻底移除，但无法用 CSS 动画过渡display） - 推荐组合：
animation: fade-out 0.3s forwards;+@keyframes最后一帧设visibility: hidden;
最容易被忽略的是 forwards 填充模式——没有它，动画一结束 opacity 就弹回初始值，淡出效果白做了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
