transition-behavior: allow-discrete 可使 display、visibility、content-visibility 等离散属性在 chrome 117+ 中实现“50% 保持原值、50% 瞬间切换”的可控翻转动画，但需显式声明完整 transition 简写（五参数）、仅对含 none/hidden 的显隐切换生效，且不支持 all 或类型切换。
transition-behavior: allow-discrete 能做什么
它不是让 display、visibility、content 等离散属性“真正插值”，而是告诉浏览器：在这些属性切换时，把过渡过程切成两段——前 50% 时间保持原值，后 50% 时间瞬间切到目标值。视觉上就是“卡一下再翻转”，比直接闪现更可控。
这个行为只在以下条件同时满足时触发：
- 浏览器是 Chrome 117+（截至 2026 年 9 月，Firefox 和 Safari 仍不支持）
- 初始值或目标值中至少有一个是
display: none或content-visibility: hidden -
transition简写中显式列出了该离散属性名，不能用all
为什么 transition: display 0.3s 没反应
因为浏览器根本不会对 display 做数值插值——没有“0.7 个 block”这种中间状态。写了也白写，不是你漏了单位或拼错了，是规范层面禁止。
常见错误现象：
-
.menu { transition: display 0.3s; }+.menu.open { display: block; }→ 菜单依然“啪”地出现 - 加
!important、调高优先级、换选择器权重，全无效 - 改成
transition: all 0.3s allow-discrete也不行——allow-discrete不会激活未显式声明的离散属性
怎么正确写 allow-discrete 过渡
必须用完整简写语法，且顺序不能错：transition: <property><duration><timing-function><delay> allow-discrete</delay></timing-function></duration></property>。
示例（让面板淡入+翻转显示）：
.panel {
display: none;
opacity: 0;
transition: display 0.3s ease, opacity 0.3s ease;
}
.panel.show {
display: block;
opacity: 1;
}
上面这段在旧浏览器里只有 opacity 动，display 仍闪现；加 allow-discrete 后要改成：
.panel {
display: none;
opacity: 0;
transition: display 0.3s ease allow-discrete, opacity 0.3s ease;
}
.panel.show {
display: block;
opacity: 1;
}
注意点：
-
allow-discrete是第五个参数，必须写在delay后面（哪怕delay是 0s） - 只对声明了的属性生效，
transition: all 0.3s allow-discrete不会启用display过渡 - 必须配合
@supports做渐进增强：@supports (transition-behavior: allow-discrete) { ... }
兼容性 fallback 怎么做才不翻车
不能只靠 allow-discrete，得保留一套降级方案：
- 用
opacity+pointer-events: none模拟visibility过渡 - 用
max-height+overflow: hidden模拟display: none ↔ block（注意初始max-height: 0要设具体值，不能是none） - 配合 JS 控制类切换时机：先加类触发动画，等
transitionend再操作真实display
最容易被忽略的一点：Chrome 的 allow-discrete 行为只在含 none 或 hidden 时生效。比如 display: flex → display: grid 依然不会触发翻转逻辑——它只解决“显隐切换”，不解决“类型切换”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
