通过结合 opacity 过渡与 visibility 控制，可实现元素的平滑显示与隐藏。1. visibility 无法直接过渡，需依赖 opacity 实现视觉渐变；2. 显示时先设 visibility: visible 再过渡 opacity 至 1，隐藏时先过渡 opacity 至 0 再延迟设置 visibility: hidden；3. 利用 transition 的延迟特性（如 visibility 0s linear 0.3s）确保动画完成后再更新可见性状态；4. 推荐使用单一 active 类切换，简化 JS 操作并保证动画流程正确。核心是 opacity 负责动画，visibility 管理布局与交互，通过过渡延迟协调时序。
在实现元素的显示与隐藏过渡效果时，直接使用 visibility 配合 opacity 和 transition 可以达到平滑的视觉效果。由于 visibility: hidden 会立即隐藏元素且不支持直接过渡（因为它只有两个状态：visible 和 hidden），所以需要结合透明度变化来实现渐变动画。
1. visibility 与 transition 的限制
visibility 属性本身无法进行渐进式过渡，它只能在指定延迟后瞬间切换 visible 和 hidden 状态。即使设置了 transition，visibility 的变化仍是突变的。但我们可以利用这一点，配合 opacity 实现视觉上的淡入淡出效果。
2. 结合 opacity 实现过渡
通过将 opacity 从 0 到 1 过渡，同时控制 visibility 在合适时机切换，可以让元素“看起来”是平滑地出现或消失。
关键思路：
立即学习“前端免费学习笔记（深入）”；
- 显示时：先设置 visibility: visible，再让 opacity 从 0 → 1
- 隐藏时：先让 opacity 从 1 → 0，完成后设置 visibility: hidden
由于 transition 只作用于 opacity，visibility 的切换通过 CSS 过渡完成时间后用 transitionend 事件或延迟控制。
3. 示例代码
以下是一个简单的 CSS 实现：
.fade-element {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.fade-element.show {
opacity: 1;
visibility: visible;
}
此时虽然 visibility 写在规则中，但由于 opacity 支持过渡，浏览器会先执行 opacity 的动画，而 visibility 在类名切换时立即生效 —— 这会导致隐藏时立刻不可见，破坏动画。
解决方法：只让 opacity 过渡，visibility 延迟更新。
改进版本：
.fade-element {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.fade-element.show {
opacity: 1;
visibility: visible;
}
/ 隐藏状态下延迟 visibility 变化 /
.fade-element.hide {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s; / visibility 延迟 0.3s 执行 /
}
这样，当添加 .hide 类时，opacity 开始淡出，0.3 秒后 visibility 才变为 hidden，确保动画完整播放。
4. 实际使用建议
在实际开发中，推荐通过 JavaScript 控制类名切换，确保动画流程正确：
// 显示元素
element.classList.remove('hide');
element.classList.add('show');
// 隐藏元素
element.classList.remove('show');
element.classList.add('hide');
或者使用更简洁的方式仅通过一个类控制状态：
.fade-container {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.fade-container.active {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
这样，添加 .active 时立即开始淡入；移除时，opacity 淡出，0.3s 后 visibility 生效。
基本上就这些，核心是利用 opacity 做视觉过渡，用 visibility 控制是否占据布局和可交互状态，再通过 transition 的延迟机制协调两者时机。不复杂但容易忽略细节。
