display无法直接过渡，因其为非连续值类型；应改用opacity+visibility模拟淡入淡出，或用max-height过渡实现收起展开效果，JavaScript控制时机更可靠。
display 无法直接过渡，这是根本限制
CSS 的 display 属性本身是**非连续值类型**（none、block、flex 等之间没有中间状态），浏览器不支持对其做 transition。你写 transition: display 0.3s 完全无效，开发者工具里也看不到过渡动画。
用 opacity + visibility 替代 display 实现“视觉过渡”
真正可过渡的是 opacity（0 → 1）和 visibility（hidden ↔ visible）。它们配合能模拟显示/隐藏的淡入淡出效果，且保持布局稳定（不会像 display: none 那样触发重排）：
-
visibility: hidden元素仍占位，opacity: 0让它不可见 - 过渡时先改
opacity，再在transitionend后切换visibility或display（如需彻底移出文档流） - 反向隐藏时，必须先设
visibility: hidden（否则opacity: 0期间仍可交互）
.fade-element {
opacity: 1;
visibility: visible;
transition: opacity 0.2s ease, visibility 0.2s step-end;
}
.fade-element.hidden {
opacity: 0;
visibility: hidden;
}
需要彻底移除布局占位？用 max-height 过渡“骗过”浏览器
当必须让元素像 display: none 那样完全不占空间，又想要过渡效果时，max-height 是最常用 hack —— 利用其数值连续性模拟高度收起/展开：
- 设一个足够大的
max-height（如max-height: 500px）作为“展开态”上限 - 收起时设
max-height: 0，配合overflow: hidden - 注意：内容高度必须小于设定的
max-height，否则会截断 - 不能用于高度动态变化的容器（比如子元素增删导致高度突变）
.slide-element {
max-height: 500px;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.slide-element.collapsed {
max-height: 0;
}
JavaScript 控制时机比纯 CSS 更可靠
纯 CSS 类切换（如 element.classList.toggle('hidden')）容易因样式计算顺序导致过渡失效，尤其在快速连点或异步渲染场景下。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 先加类触发动画（如
opacity: 0） - 监听
transitionend事件，在回调里设置display: none或清理样式 - 隐藏操作中，确保
visibility: hidden在opacity开始变化前就生效，避免点击穿透 - 显示操作中，先设
display: block（或对应值），再加动画类，否则初始display: none会让opacity过渡直接跳过
关键点在于：**display 的切换永远要和过渡属性错开帧执行，不能同时设置**。
