Chrome 117+ 支持 transition-behavior: allow-discrete，使 display、visibility 等离散属性可实现“50%时刻突变”的伪过渡；它非真正插值，而是分段调度，需显式声明属性且仅在含 none/hidden 时生效，旧浏览器须用 opacity+transform 等降级方案。
display、visibility、content 等离散属性默认不能过渡——不是你写错了，是浏览器根本不会插值；但 Chrome 117+ 已支持 transition-behavior: allow-discrete，可让它们“半途翻转”，实现视觉上的过渡感。
为什么 transition: display 0.3s 完全没用
浏览器对 display 的值（如 none/block）不做数值插值，没有“0.4个 block”这种中间状态。哪怕写了 transition，实际行为仍是：样式计算完成瞬间切换，毫无缓动。同理，visibility、z-index、font-family、content 都属于离散属性，transition 对它们完全静默。
常见错误现象：.menu { transition: display 0.3s; } + .menu.open { display: block; } → 菜单依然“啪”一下弹出，毫无动画。
- 不要试图靠加
!important或调整顺序修复——这是底层机制限制，不是优先级问题 -
visibility: hidden虽然也不插值，但它配合opacity和pointer-events可模拟过渡，而display连这个机会都没有 - 旧方案（如用
max-height或opacity替代）仍需保留，因transition-behavior目前仅 Chrome 117+ 支持
transition-behavior: allow-discrete 实际怎么写
它不是独立属性，而是 transition 的一个可选值，必须和 transition-property、transition-duration 等一起出现。语法上，它是 transition 简写的第五个参数（排在 transition-delay 之后）。
示例：让 display 在 0.3 秒内“翻转”（即前 50% 时间保持初始值，后 50% 突变为目标值）：
.panel {
display: none;
transition: display 0.3s ease allow-discrete;
}
.panel.show {
display: block;
}
注意点：
- 必须显式写出
display（或其他离散属性名）作为transition-property，不能只写all——transition: all 0.3s allow-discrete不会激活离散属性过渡 - 该行为仅在初始值或目标值含
display: none或content-visibility: hidden时触发“50% 翻转”逻辑；其他离散值（如display: flex→display: grid）目前不生效 - Firefox、Safari 当前（2026 年 5 月）尚未实现该特性，需用
@supports (transition-behavior: allow-discrete)做渐进增强
兼容性 fallback 怎么做才不翻车
不能只依赖 allow-discrete，得给老浏览器兜底。推荐组合策略：
- 主逻辑仍用
display控制真实渲染（避免无障碍问题），但加一层opacity+transform动画层用于视觉过渡 - 用
@supports检测并启用allow-discrete，同时禁用冗余的 JS 显示/隐藏逻辑 - 避免在同一个元素上混用
display和opacity过渡——若display: none生效，opacity动画会被中断，导致闪烁
简单 fallback 示例：
.tooltip {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
}
@supports (transition-behavior: allow-discrete) {
.tooltip {
display: none;
transition: display 0.2s ease allow-discrete, opacity 0.2s ease, transform 0.2s ease;
}
.tooltip.show {
display: block;
}
}
容易被忽略的关键细节
transition-behavior: allow-discrete 不是“让离散属性真正插值”，而是浏览器在内部做了特殊调度：它把整个过渡时间一分为二，在前半段维持原值（比如 display: none），后半段直接切到目标值（比如 display: block），同时保证元素在整段时间内参与布局（即不会闪退）。这和传统过渡有本质区别——它没有中间帧，只有“临界点”。
这意味着：
- 你无法用
cubic-bezier()自定义它的“翻转节奏”，只能用ease等基础 timing function 影响非离散部分（如同时过渡的opacity） - 若同时过渡
display和background-color，颜色会全程平滑变化，而display只在 50% 时刻突变——二者不同步，需留意视觉节奏是否割裂 - 服务端渲染（SSR）或首屏直出场景下，该属性可能因样式未及时注入而失效，建议配合
@starting-style确保初始态可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
