仅设 opacity: 0 不够，因元素仍占位、可点击、能获焦点；须配合 visibility 或 display 控制交互与布局，再用 transition 实现自然过渡。
直接用 opacity + transition 就能实现，但必须配合 pointer-events 和 visibility 或 display 控制交互与布局影响，否则会出 bug。
为什么只设 opacity: 0 不够用
单纯把按钮透明度设为 0，它还在文档流里占位、仍能响应点击、键盘焦点也能落到上面——用户“看不见却点得着”，体验断裂。常见错误现象包括：点击空白处触发按钮、Tab 键意外停在不可见按钮上、动画结束后元素仍挡着下面的内容。
实操建议：
- 过渡阶段用
opacity实现视觉淡出/淡入 - 过渡结束时（靠
transitionend事件或 CSSvisibility配合）真正移除交互能力 - 若需彻底释放空间，改用
display: none，但注意它不支持 CSS 过渡，必须和opacity分开控制
transition 的关键参数怎么配才自然
transition: opacity 0.3s ease-in-out 是最常用组合，但实际效果取决于上下文。比如按钮被频繁快速切换时，ease-in-out 容易造成“卡顿感”；而模态框蒙层这类全屏元素，用 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 更显沉稳。
要注意的坑：
- 别在父容器上写
transition，否则所有子元素透明度变化都会被继承 - 避免同时对
opacity和transform做长时长过渡，浏览器渲染压力明显上升 - 移动端 Safari 对
transition的delay支持不稳定，慎用transition-delay
纯 CSS 实现点击切换，不用 JS 怎么做
靠隐藏 <input type="checkbox"> + label + 相邻兄弟选择器 +，是目前最稳定、无障碍友好的纯 CSS 方案。
核心结构：
<input type="checkbox" id="toggle-btn"><label for="toggle-btn">点我</label> <button class="target-btn">目标按钮</button>
CSS 控制逻辑：
-
#toggle-btn:checked + label + .target-btn { opacity: 0; }—— 点击 label 后让按钮淡出 - 加
transition到.target-btn上，不是 checkbox 或 label - 必须用
for和id绑定，否则无法触发状态变更
渐隐后要不要删掉 DOM 节点
绝大多数情况——不要删。DOM 操作开销远大于维持一个 opacity: 0; visibility: hidden 的节点。只有当该按钮生命周期明确终结（比如表单提交成功后永久禁用），才考虑用 JS 移除。
容易被忽略的点：
-
visibility: hidden保留布局位置且不响应交互，比display: none更适合动画收尾 - 如果按钮绑了事件监听器，仅设
opacity: 0不会自动解绑，可能引发内存泄漏 - 用
getComputedStyle(el).opacity检测当前值时，返回的是字符串（如"0"），别直接跟数字比较
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
