display: none 让 transition 失效，因其是离散属性，无中间状态；应改用 visibility + opacity、max-height + overflow 或 JS 强制触发布局等替代方案。
display: none 为什么让 transition 失效
因为 display 是 CSS 中的「离散属性」，浏览器不对其做插值计算。哪怕你写了 transition: display 0.3s，它也完全不生效——display 在 none 和其他值之间没有中间状态，过渡引擎直接跳变。
用 visibility + opacity 替代 display
这是最常用、兼容性最好、语义也最干净的方案：保留元素占位（避免重排），靠视觉隐藏+渐显来模拟“出现”效果。
-
visibility: hidden保持盒模型，不影响布局流，且支持 transition -
opacity: 0配合visibility实现淡入，两者同时过渡更自然 - 触发时先设
visibility: visible，再加opacity: 1（或用 class 切换）
示例：
/* 初始隐藏 */
.element {
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.3s, opacity 0.3s ease;
}
<p>/<em> 显示时 </em>/
.element.show {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}用 height + overflow 配合 transition
适合已知高度或最大高度的容器（如下拉菜单、折叠面板）。关键在于不能依赖 height: auto——它无法过渡。
立即学习“前端免费学习笔记（深入）”；
- 用固定值（如
height: 0→height: 200px）或max-height模拟（推荐） - 必须配
overflow: hidden，否则内容会撑开容器 -
max-height要设得比实际内容高 enough，但别过大（影响性能和动画节奏）
示例（安全兜底写法）：
.collapsible {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.collapsible.open {
max-height: 500px; /* 略大于可能的最大高度 */
}JavaScript 强制触发布局再过渡（慎用）
当必须用 display 控制显隐（比如第三方库强制 reset）、又想补过渡时，只能靠 JS 打断渲染流水线。
- 先设
display: block（或其他非 none 值） - 立即读取一个 layout 触发属性（如
offsetHeight），强制浏览器计算当前样式 - 再加过渡类或设目标样式
- 这个“强制重排”有性能代价，频繁调用会卡顿
简写示意：
el.style.display = 'block';
el.offsetHeight; // 触发 layout
el.classList.add('fade-in');真正难的不是写出过渡效果，而是判断该用哪套方案：要不要保留占位？内容高度是否可控？有没有 JS 干预权限？这些决定了 visibility/opacity、max-height 还是 JS hack 的取舍。很多人卡在第一步——没意识到 display 本身就不参与过渡，硬加 transition 只是白忙。
