使用 opacity 和 visibility 配合 transition 可实现子元素的平滑淡入淡出效果。由于 display 不支持过渡动画，直接切换 display: none/block 会导致 transition 失效，造成元素突显突隐。正确做法是：通过 opacity 控制透明度过渡（0 到 1），visibility 控制渲染可见性（hidden 或 visible），并在类中添加 transition: opacity 0.3s ease 实现动画。隐藏时 opacity 渐变为 0，再由 visibility 真正关闭渲染，视觉上实现自然过渡。可配合 pointer-events: none 避免交互干扰。注意不要对 visibility 添加 transition，且若需元素不占空间，可在动画结束后用 js 移除或设 display: none。该方案兼顾性能与体验，适用于频繁显隐场景。
在使用 CSS 控制子元素的显示与隐藏时，如果希望实现平滑的过渡效果（如淡入淡出），直接使用 display: none/block 会导致 transition 失效，因为 display 不支持过渡动画。这时应结合 opacity 和 visibility 属性，配合 transition 实现视觉上自然的显隐过渡。
问题原因：display 不支持 transition
常见的错误做法是通过切换 display: none 和 display: block 来控制元素显隐。这种写法虽然能隐藏元素，但无法触发 opacity 的过渡动画，导致“突然出现”或“瞬间消失”，用户体验差。
正确方案：使用 opacity + visibility + transition
通过组合以下属性，可以实现淡入淡出并真正隐藏元素（不占据布局或可交互）：
- opacity：控制透明度，0 为完全透明，1 为完全不透明，支持过渡。
-
visibility：控制是否可见，
hidden时不渲染但占位，visible时可见。 - transition：对 opacity 添加过渡效果，实现渐变动画。
- 可选：pointer-events：配合 visibility 避免隐藏时仍能触发点击。
.hidden {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
pointer-events: none;
}
.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
将类名从 visible 切换为 hidden 时，opacity 会平滑过渡到 0，再通过 visibility 真正“关闭”渲染。由于 visibility 本身不支持 transition，所以靠 opacity 完成动画视觉部分。
立即学习“前端免费学习笔记（深入）”；
注意事项与优化建议
为了确保动画流畅且逻辑清晰，注意以下几点：
- 不要对
visibility使用 transition，它只能立即生效。 - 若需元素完全不占空间，可在 opacity 过渡结束后通过 JS 移除元素或设置
display: none，但会牺牲纯 CSS 方案的简洁性。 - 对于频繁显隐的场景，推荐保持 DOM 存在，仅用 opacity + visibility 控制，性能更优。
- transition 只作用于 opacity，避免给其他非过渡属性添加动画声明。
