opacity + transition 更顺滑，因 opacity 可硬件加速且支持渐变动画，而 display 无法过渡、visibility 无渐变效果；需配合 visibility 控制交互与布局，并可加 transform 提升性能。
用 opacity 配合 transition 是让元素显示/隐藏更自然的常用方法，比直接用 display: none 或 visibility: hidden 更平滑。
为什么 opacity + transition 更顺滑
opacity 是可动画的 CSS 属性，浏览器能对其做硬件加速（尤其配合 will-change: opacity 或 transform），过渡过程流畅；而 display 无法过渡，visibility 虽可切换但无渐变效果。
基础写法（推荐）
给元素设置初始状态和过渡规则：
- 默认设
opacity: 0; visibility: hidden;（隐藏时不可点击、不占布局空间） - 添加
transition: opacity 0.3s ease, visibility 0.3s;（visibility 过渡时间需与 opacity 一致，否则可能闪现） - 显示时设
opacity: 1; visibility: visible;
避免点击穿透和布局抖动
只靠 opacity 不够——透明度为 0 的元素仍响应事件、占据文档流。建议组合使用：
立即学习“前端免费学习笔记（深入）”；
- 始终搭配
visibility: hidden/visible控制交互和渲染 - 若需完全脱离文档流（比如下拉菜单），可加
position: absolute或在显示时再设display: block（但 display 不能过渡，所以仅在 opacity 动画结束后用 JS 切换） - 需要更精细控制时，用
pointer-events: none配合 opacity=0，防止误点
进阶：配合 transform 提升性能
对频繁动画的元素（如弹窗、提示框），可加轻量级 transform 触发 GPU 加速：
- 隐藏状态：
opacity: 0; visibility: hidden; transform: scale(0.95); - 显示状态：
opacity: 1; visibility: visible; transform: scale(1); - 过渡写成：
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
不复杂但容易忽略细节，关键在 opacity、visibility、transition 三者协同，再按需加 transform 和 pointer-events 就很稳了。
