visibility不能单独用于transition，因其状态切换无渐变；需结合opacity实现视觉淡入淡出，配合visibility控制元素交互状态，通过transition对opacity动画，并用max-height模拟展开收起效果，确保隐藏时不可见且不响应事件。
使用 CSS transition 与 visibility 直接结合无法实现流畅的显示/隐藏动画，因为 visibility 只有两个离散状态：visible 和 hidden，它不支持中间过渡。但我们可以巧妙结合 opacity、visibility 和 transition 来实现视觉上平滑的显示隐藏效果。
为什么 visibility 不能单独用于 transition
visibility 的变化是立即生效的，没有渐变过程。即使设置了 transition，浏览器也不会对 visible 到 hidden 的切换做插值处理，因此看不到淡入淡出效果。
结合 opacity 与 visibility 实现淡入淡出动画
通过同时控制透明度（opacity）和可见性（visibility），可以在视觉上实现平滑过渡，同时确保元素在“隐藏”状态下不占据交互空间。
基本思路：
立即学习“前端免费学习笔记（深入）”；
- 用
opacity控制淡入淡出视觉效果 - 用
visibility控制是否可点击或被屏幕阅读器感知 - 通过
transition对opacity做动画 - 配合
pointer-events: none防止隐藏时触发事件
示例代码：
.fade-element {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease;
}
.fade-element.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
当添加 active 类时，元素从完全透明变为不透明，同时 visibility 切换为 visible，实现平滑出现。移除类时反向执行。
使用 height 或 max-height 实现展开收起动画
如果需要模拟块级元素的高度展开/收起（如菜单、折叠面板），可以结合 max-height 与 overflow：
.collapse {
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: all 0.3s ease;
}
.collapse.expanded {
max-height: 200px; / 设置一个合理上限 /
opacity: 1;
visibility: visible;
}
注意：不能对 height: auto 做过渡，所以常用 max-height 模拟动态高度。
推荐方案：使用 JavaScript 控制类切换
为了更精确控制动画结束后的状态（比如真正隐藏元素），可以在 transitionend 事件中操作：
const el = document.querySelector('.fade-element');
// 显示
function show() {
el.classList.add('active');
}
// 隐藏
function hide() {
el.addEventListener('transitionend', function f() {
el.removeEventListener('transitionend', f);
el.style.visibility = 'hidden';
}, { once: true });
el.classList.remove('active');
}
基本上就这些。关键在于理解 visibility 本身不可过渡，但可以和 opacity 配合，在保证功能正确的同时实现视觉动画。
