transition-behavior: allow-discrete 仅对 display 和 content-visibility 生效，仅在 none→其他或 hidden→visible 切换时触发过渡，需显式声明 transition-property 且仅支持这两个属性，Chrome/Edge 128+ 支持，须用 @supports 做渐进增强。
transition-behavior: allow-discrete 只对 display/content-visibility 生效
目前（2026年9月）只有 display 和 content-visibility 这两个离散属性能通过 transition-behavior: allow-discrete 触发过渡动画，且仅在「从 none → 其他值」或「从 hidden → visible」这类明确的“隐藏→显示”切换时才激活。其他离散值组合（如 display: flex → display: grid）不会产生中间帧，浏览器直接跳变。
必须显式声明 transition-property，不能用 all
transition: all 0.3s ease allow-discrete 是无效的——all 不会把 display 纳入可动画列表，浏览器直接忽略离散行为。正确写法必须写出具体属性名：
button {
display: none;
transition-property: display;
transition-duration: 0.3s;
transition-behavior: allow-discrete;
}
button.show {
display: block;
}-
transition-property必须是display或content-visibility，拼错（如dispaly）或写成opacity, display混合声明，都会导致离散行为失效 - 简写形式
transition: display 0.3s allow-discrete合法，但推荐分离写法，避免被后续样式覆盖
浏览器兼容性差，必须用 @supports 做渐进增强
Firefox 和 Safari 当前（2026年9月）仍未实现 transition-behavior，仅 Chrome/Edge 128+ 支持。不加防护会直接降级为无动画的跳变：
@supports (transition-behavior: allow-discrete) {
.panel {
transition-property: display;
transition-duration: 0.25s;
transition-behavior: allow-discrete;
}
}
/* fallback for other browsers */
.panel {
transition: opacity 0.25s;
}
.panel[hidden] { opacity: 0; }- 不要依赖 JS 检测，
@supports是唯一可靠方式 - fallback 方案建议用
opacity+pointer-events: none组合模拟“淡入淡出”，比单纯display: none更平滑
离散过渡实际只走“50% 翻转”逻辑，不是真插值
它不是像 transform 那样逐帧计算中间状态，而是将整个过渡分成两段：前 50% 保持初始值（如 display: none），后 50% 立即应用目标值（如 display: block），再配合 opacity 或 transform 做视觉补全。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 无法控制中间阶段的布局表现（比如高度过渡、滚动位置）
- 如果同时过渡
display和opacity，需确保两者 duration 一致，否则视觉脱节 - 服务端渲染（SSR）或 hydration 阶段若初始状态含
display: none，首次显示仍可能闪一下——这是当前实现的固有局限
