hidden属性无法与opacity动画协同，因其直接移除元素导致过渡失效；正确做法是用visibility+opacity组合，或通过js手动控制过渡流程。
hidden 属性本身不参与 CSS 过渡，也不能和 opacity 动画协同工作——它一设就立刻生效，直接从渲染树中移除元素，opacity 根本没机会变化。
为什么不能直接用 hidden 触发淡入淡出
hidden 是 HTML 原生布尔属性，作用等效于 display: none，浏览器会跳过布局、绘制、合成全部阶段。一旦设上，元素瞬间消失，任何基于 opacity 的 transition 或 @keyframes 都不会执行。
- 常见错误：给元素加
hidden同时又写transition: opacity 0.3s，结果动画完全不出现 -
hidden不支持 JavaScript 动态监听“即将隐藏”或“隐藏中”状态，无法插入过渡逻辑 - 它和
visibility: hidden完全不同：visibility仍占位、可动画（配合opacity），而hidden什么都留不下
想保留 hidden 语义？那就得手动接管过渡流程
如果你坚持用 hidden 表达“该元素当前不应被用户感知”，就得用 JS 拆解它的行为：先做视觉过渡，再真正设 hidden。
- 淡出时：先移除
hidden（确保元素可见），再添加 fade-out 类（含opacity: 0+transition），监听transitionend事件，在回调里才设置element.hidden = true - 淡入时：先设
element.hidden = false（此时元素仍透明），再加 fade-in 类（opacity: 1），过渡自动触发 - 别在 CSS 里对
[hidden]写opacity: 0—— 浏览器会忽略，因为hidden已经让元素不可见了
opacity + visibility 是更可控的替代组合
绝大多数场景下，用 visibility: hidden 替代 hidden 属性，配合 opacity 动画，既语义清晰又行为可预测。
- 初始隐藏写：
opacity: 0; visibility: hidden; - 显示时只改
opacity: 1，并确保visibility: visible（否则即使不透明也点不到） - 过渡声明必须写全：
transition: opacity 0.3s ease;，不能用all，避免意外触发动画 - 如果真要释放布局空间（比如淡出后让下方内容上移），等
opacity到 0 后，再用 JS 设置display: none或visibility: hidden—— 但注意：后者仍占位，前者才真正腾空
真正容易被忽略的是过渡结束时机：动画完成 ≠ 元素状态就绪。transitionend 事件可能因浏览器优化被节流，或者在快速连续触发时丢失；visibility 和 opacity 的配合顺序稍错，就会导致点击穿透或布局跳动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
