display无法过渡因是离散属性，应改用opacity+visibility组合实现淡入淡出，需配合transition-delay错开visibility时机；若需收起空间，须追加max-height或height动画，并注意js中transitionend事件监听与状态防抖。
display 切换本身无法过渡，这是 CSS 规范限制
display 是一个离散属性，浏览器不支持对其做平滑过渡（transition 无效）。哪怕你写了 transition: display 0.3s，也不会有任何动画效果。这不是写法问题，而是浏览器根本不会计算 display: none → block 之间的中间状态。
用 opacity + visibility 替代 display 的实操要点
核心思路是：用 opacity 控制透明度变化（支持过渡），用 visibility 控制是否响应事件和占据空间（hidden 仍占布局位置，但不可见、不可交互；visible 恢复一切）。
-
visibility: hidden时元素仍参与文档流，不影响其他元素布局 —— 这点和display: none不同，需提前在父容器或自身处理好高度/溢出 - 必须同时控制
opacity和visibility，否则会出现「看不见但能点中」或「能看见但点不了」的问题 - 过渡应只作用于
opacity，visibility通常用transition-delay错开时机来避免闪现
/* 推荐的切换类 */
.fade-out {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease-out;
}
.fade-in {
opacity: 1;
visibility: visible;
transition: opacity 0.2s ease-in;
}
<p>/<em> 关键：visibility 变化要等 opacity 完成后再生效，所以加 delay </em>/
.fade-out {
transition: opacity 0.2s ease-out, visibility 0s 0.2s;
}
.fade-in {
transition: opacity 0.2s ease-in, visibility 0s;
}需要隐藏空间占用？补上 height 或 max-height 动画
如果原需求是像 display: none 那样彻底“收起来”，让后续元素上移，仅靠 opacity + visibility 不够 —— 因为它们不释放布局空间。这时得配合尺寸控制：
- 对已知高度的元素，可过渡
height+overflow: hidden - 对高度不确定的元素，用
max-height过渡（设一个足够大的上限值，如max-height: 500px），并确保初始/结束值都覆盖实际内容 - 记得同步控制
padding、margin，否则收缩时边缘可能残留空白
.collapse-out {
max-height: 500px;
opacity: 1;
visibility: visible;
overflow: hidden;
transition: max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0s 0.3s;
}
.collapse-in {
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: max-height 0.3s ease-in, opacity 0.3s ease-in, visibility 0s;
}JavaScript 切换时注意触发时机和 class 移除
用 JS 控制 class 时，别在添加 fade-out 后立刻移除元素或清空 class —— 动画还没结束就删掉，会导致过渡中断。正确做法是监听 transitionend 事件：
立即学习“前端免费学习笔记（深入）”；
- 只监听一次
opacity的结束（避免visibility也触发）：event.propertyName === 'opacity' - 移除 class 前先确认当前处于隐藏态，防止重复操作
- 如果用
max-height，注意它在0时可能因四舍五入导致事件不触发，建议加0.01px容差
最容易被忽略的是：当用户快速连续点击显示/隐藏时，transitionend 可能滞后触发，造成 class 状态错乱。稳妥做法是加防抖或用 getComputedStyle(el).opacity 实时判断当前状态再决定下一步。
