display无法参与transition，因其为离散属性，浏览器不计算none与block间的中间状态，transition规则被直接丢弃；应改用opacity与pointer-events组合实现淡入淡出。
display 不能加 transition，写了也白跑——浏览器压根不插值，不是你写法不对。
为什么 display 切换永远“啪”一下
浏览器对 display: none 和 display: block 这类值不做数值计算，没有“0.7 个 block”这种中间状态。哪怕你写了 transition: display 0.3s，实际行为仍是：样式一计算完，立刻切换，毫无帧过渡。
- 同属离散属性的还有：
visibility（hidden/visible）、z-index、font-family、content -
visibility: hidden虽然也不插值，但能配合opacity+pointer-events模拟出过渡感；display连这个机会都没有 - 错误写法示例：
.modal { transition: all 0.3s; } .modal.open { display: block; }→ 完全无效
用 opacity + pointer-events 实现淡入淡出
这是最轻量、兼容性最好、也最可控的弹出层过渡方案，适合模态框、提示气泡、抽屉菜单等场景。
- 基础样式必须显式设
opacity: 0和pointer-events: none，否则过渡不会触发 - 动画时只改
opacity: 1和pointer-events: auto，视觉与交互同步生效 - 别依赖
opacity: 0隐藏语义——屏幕阅读器仍会读取；如需真正移除可访问性，得配合aria-hidden="true"或 JS 控制hidden属性
.modal {
opacity: 0;
pointer-events: none;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.show {
opacity: 1;
pointer-events: auto;
}
Chrome 117+ 可试 transition-behavior: allow-discrete
这是目前唯一能让 display “看起来有过渡”的原生方案，但它不是真插值，而是分段调度：前 50% 时间保持原值，后 50% 突变为目标值。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明
transition: display 0.3s ease allow-discrete，all不生效 - 仅在初始值或目标值含
display: none时触发“翻转”逻辑；block↔flex这类切换目前不支持 - Firefox 和 Safari 当前（2026 年 10 月）仍未实现，必须用
@supports (transition-behavior: allow-discrete)做渐进增强 - 不能替代
opacity方案，只能作为 Chrome 用户的视觉补充
展开/收起高度变化？用 max-height 替代 height
当弹出层需要从无到有“撑开”内容（比如下拉菜单、折叠面板），max-height 是比 height 更稳妥的选择。
- 初始状态：
max-height: 0+overflow: hidden - 展开状态：
max-height: 500px（必须是具体像素值，且大于内容实际高度，否则会截断） - 不能用
max-height: auto——浏览器无法对auto插值 - 如果内容高度动态变化（比如文字增减），需 JS 重新测量并重设
max-height值
.dropdown {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.dropdown.open {
max-height: 500px;
}
真正难的不是选哪个方案，而是记住：所有过渡都依赖明确的起止值 + 可插值属性 + 正确的触发时机。一旦漏掉其中一环，动画就静默失效——它不会报错，只会“假装没看见”。
