display: none 无法直接过渡，因 display 是离散值；推荐用 opacity + visibility 组合实现渐隐渐显，或用 max-height 模拟展开收起，JavaScript 需配合 transitionend 控制 display 时机。
display: none 无法直接做 CSS 过渡
直接给 display 属性加 transition 是无效的，因为 display 是离散值（none / block / flex 等），不是可插值的连续属性，浏览器无法计算中间状态。
用 opacity + visibility 替代是最常用方案
视觉上实现“渐隐渐显”效果，同时保持元素占位或不占位的控制权：
-
visibility: hidden配合opacity: 0→ 元素不可见但保留布局空间；若需完全不占位，再加position: absolute或height: 0; overflow: hidden - 过渡组合推荐：
opacity 0.3s ease, visibility 0.3s—— 注意visibility本身无时长插值，但延迟触发能避免闪现 - 必须显式设置
visibility: visible，否则从display: none切换回来时，初始状态可能为visibility: hidden导致不显示
/* 示例：淡入淡出且不占位 */
.element {
opacity: 0;
visibility: hidden;
position: absolute;
transition: opacity 0.2s ease, visibility 0.2s;
}
.element.show {
opacity: 1;
visibility: visible;
position: static;
}需要真正“从无到有”的动画？用 max-height 模拟
适用于高度可预估的块级内容（如菜单、提示框），通过 max-height 过渡制造展开/收起感：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
-
max-height: 0+overflow: hidden实现视觉隐藏，等效于display: none - 设一个足够大的
max-height值（如500px），确保内容完全展开；不能用max-height: none，它无法过渡 - 配合
opacity可增强效果，但注意max-height过渡在内容高度变化大时可能不够自然
.collapsible {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
.collapsible.open {
max-height: 500px;
opacity: 1;
}JavaScript 控制 display 时机是绕不开的环节
CSS 动画只能处理“可见性变化”，但最终是否从 DOM 流中移除，仍需 JS 协同：
立即学习“前端免费学习笔记（深入）”；
- 动画结束前不能直接设
display: none，否则会中断过渡；应在transitionend事件里设置 - 反向操作（从隐藏变显示）要先设
display: block，再加 class 触发动画，否则元素一开始不可见，过渡不生效 - 用
getComputedStyle(el).display === 'none'判断状态不如用 class 控制更可靠
关键逻辑：显示时先 el.style.display = 'block' → 强制重排 → 再添加 .show 类；隐藏时监听 transitionend 后设 el.style.display = 'none'。
