opacity: 0 适合平滑淡入淡出动画，因可过渡且可能获 gpu 加速；需配 transition 和 pointer-events 控制交互与无障碍；display: none 不可过渡，须配合 js 分阶段控制资源释放。
opacity: 0 适合做平滑淡入淡出动画
因为 opacity 是可过渡（transition）的 CSS 属性，浏览器能插值计算中间帧，实现视觉上连续的渐变效果。只要元素没被移出渲染树，GPU 就可能加速该动画。
常见错误是只设 opacity: 0 却忘了加 transition: opacity 0.3s，结果切换时还是“啪”一下闪现或消失。
使用场景包括：模态框入场/退场、下拉菜单淡出、加载中提示的渐隐。
- 必须确保父容器没有
overflow: hidden裁剪掉过渡过程中的半透明状态 - 若元素含子组件（如按钮、输入框），默认仍可点击——需手动加
pointer-events: none配合opacity切换 - 屏幕阅读器仍会读取
opacity: 0元素，无障碍需额外处理（如加aria-hidden="true"）
display: none 不能直接参与 CSS 过渡动画
display 是离散属性，浏览器无法在 none 和 block（或其他值）之间插值，所以写 transition: display 0.3s 完全无效。
强行用它做“动画”，实际是两步操作：先改 opacity 或 transform 做视觉过渡，等动画结束再用 JS 切换 display ——否则元素会在动画中途突然消失，破坏连贯性。
典型误用：给一个 display: none 元素直接加 transition，以为能“淡出后隐藏”，结果只是 opacity 没动、display 瞬切。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 想“先淡出再释放空间”，得用 JS 监听
transitionend事件，在回调里设display: none - 若元素含大量子节点或复杂布局，
display: none切换会触发重排（reflow），频繁操作可能卡顿 - 对 SEO 和可访问性而言，
display: none元素不会被屏幕阅读器读取，也不被搜索引擎索引
动画过程中意外响应点击？大概率是 opacity: 0 没关 pointer-events
opacity: 0 元素视觉不可见，但默认仍接收鼠标和焦点事件——这在下拉菜单、弹窗遮罩等场景极易引发 bug：用户点到“空处”，其实点中了透明按钮。
解决方式不是删掉 opacity，而是配对控制交互能力：
- 隐藏时：
opacity: 0; pointer-events: none; - 显示时：
opacity: 1; pointer-events: auto; - 注意：不要只依赖
pointer-events: none来“隐藏功能”，它不解决可访问性问题（键盘 tab 仍可聚焦）
display: none 在动画前/后用于释放资源更合适
真正需要性能优化的场景，比如一个带 canvas 或视频的模态框，仅靠 opacity: 0 不够——元素还在渲染树里，canvas 仍在绘制，视频仍在解码。
这时应分阶段处理：
- 动画开始前：保留
display: block+opacity: 1 - 动画进行中：只动
opacity或transform - 动画结束后（
transitionend）：设display: none+ 暂停 video/canvas
反向恢复时同理：先 display: block，再 opacity: 0 → opacity: 1 动画。
这个节奏容易被忽略——很多人把所有逻辑塞进一个 class 切换里，导致资源没释放或动画撕裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
