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; } <p>.fade-element.active { opacity: 1; visibility: visible; pointer-events: auto; }</p>
当添加 active 类时，元素从完全透明变为不透明，同时 visibility 切换为 visible，实现平滑出现。移除类时反向执行。
使用 height 或 max-height 实现展开收起动画
如果需要模拟块级元素的高度展开/收起（如菜单、折叠面板），可以结合 max-height 与 overflow：
.collapse { max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: all 0.3s ease; } <p>.collapse.expanded { max-height: 200px; /<em> 设置一个合理上限 </em>/ opacity: 1; visibility: visible; }</p>
注意：不能对 height: auto 做过渡，所以常用 max-height 模拟动态高度。
推荐方案：使用 JavaScript 控制类切换
为了更精确控制动画结束后的状态（比如真正隐藏元素），可以在 transitionend 事件中操作：
const el = document.querySelector('.fade-element'); <p>// 显示 function show() { el.classList.add('active'); }</p><p>// 隐藏 function hide() { el.addEventListener('transitionend', function f() { el.removeEventListener('transitionend', f); el.style.visibility = 'hidden'; }, { once: true }); el.classList.remove('active'); }</p>
基本上就这些。关键在于理解 visibility 本身不可过渡，但可以和 opacity 配合，在保证功能正确的同时实现视觉动画。
以上就是css javascript java 浏览器 ssl overflow 为什么 JavaScript css auto pointer 事件 overflow transition