opacity动画需配合transition才能实现淡入，直接修改值无过渡效果；遮罩层须脱离文档流并用定位+层级控制；初始opacity必须显式设为数值，移动端应避免依赖:hover。
opacity 动画必须配合 transition 才能淡入
直接改 opacity 值不会产生过渡效果，浏览器默认是瞬时切换。只有加上 transition 声明，它才知道“这个属性要慢慢变”。常见错误是只写 opacity: 0.5，却不配 transition，结果看起来毫无动画。
-
transition必须写在初始状态（比如 hover 前或 class 切换前），不能只写在目标状态里 - 推荐写全三项：
transition: opacity 0.3s ease-in-out;—— 漏掉ease-in-out可能显得生硬 - 如果同时控制多个属性（如 opacity + transform），不要用
transition: all，容易意外触发其他属性动画
遮罩层需要脱离文档流才能盖住内容
单纯设 opacity 不等于“遮罩”：如果元素还在正常流里，它可能被其他元素挤开、错位，甚至被子元素内容穿透。真正起遮罩作用的，得靠定位 + 层级。
- 必须加
position: absolute或fixed，再配合top/left/right/bottom: 0铺满父容器 - 用
z-index确保它在目标内容之上，但别乱设超大值（如 9999），容易后续覆盖失控 - 父容器记得加
position: relative，否则absolute的遮罩会相对于 body 定位，跑偏
hover 触发淡入时，opacity 起始值不能是 inherit 或 unset
很多新手把遮罩层初始 opacity 写成 inherit 或留空，结果 hover 时动不了——因为浏览器不知道“从哪开始变”。transition 只对明确的数值起效。
- 初始状态必须显式写
opacity: 0;，hover 或 active 时写opacity: 0.7; - 避免用
opacity: initial，它在不同浏览器下可能解析为 1 或 undefined - 如果要用 JS 控制开关，也请确保 JS 设置的是具体数字，而不是字符串
"0"（CSS 会忽略）
移动端 touch 设备上 hover 可能不触发
在 iOS 和部分安卓浏览器里，:hover 仅在模拟鼠标指针时短暂生效，真实触摸几乎无效。想让遮罩在手机上也能点开，得换交互方式。
- 改用
:active（轻触瞬间）或加 JS 监听click/touchstart切换 class - 如果用 JS，注意不要同时绑定
click和touchstart，否则在某些安卓上会触发两次 - transition 的时间别设太长（比如 >0.5s），移动端用户对延迟更敏感
opacity 淡入看着简单，但真正稳稳跑在各种设备和状态下的关键，在于初始值是否明确、定位是否可控、触发方式是否兼容——漏掉其中一环，遮罩就可能“闪一下”“压不住”或者“干脆不动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
