transition-behavior: allow-discrete 必须作为 transition 简写的第五个参数显式声明，且需完整写出五个值（property、duration、timing-function、delay、behavior），仅用于 display/visibility/content-visibility 等特定离散属性，并配合 @starting-style 实现首次动画。
transition-behavior: allow-discrete 怎么写才生效
直接写 transition-behavior: allow-discrete 是无效的——它不是独立属性，必须作为 transition 简写的一部分显式声明，且只对特定离散属性起作用。
关键点在于：必须同时指定 transition-property（比如 display）、transition-duration、transition-timing-function、transition-delay，最后才是 transition-behavior。它是第五个参数。
-
transition: display 0.3s ease 0s allow-discrete;✅ 正确（五个值齐全） -
transition: display 0.3s allow-discrete;❌ 缺少 timing function 和 delay，浏览器会忽略整个声明 -
transition: all 0.3s ease allow-discrete;❌all不触发离散属性的 behavior 控制，必须明确列出属性名
哪些属性能用 allow-discrete，哪些不能
不是所有“看起来离散”的属性都支持。Chrome 117+ 当前仅对以下属性启用 allow-discrete 的翻转行为：
-
display（仅当初始值或目标值为none时） -
visibility（仅当为hidden或visible） -
content-visibility（仅当为hidden或auto）
这些属性不会插值，而是“在 50% 时间点突变”——前半段保持原值，后半段直接切到目标值。视觉上像卡顿过渡，但比完全无动画好。
不支持的常见误试：z-index、font-family、content、position —— 即使写了 allow-discrete，浏览器也静默忽略。
@starting-style 是必须配套的吗
不是必须，但首次显示时想让 transition 立刻动起来，就得加。Chrome 默认跳过元素首次样式计算时的 transition，哪怕你写了完整的 transition + allow-discrete，第一次从 display: none → block 仍无动画。
解决方法是用 @starting-style 提前“占位”初始状态：
div.menu {
display: none;
transition: display 0.3s ease 0s allow-discrete;
}
div.menu.open {
display: block;
}
@starting-style {
div.menu {
display: none;
}
}
注意：@starting-style 必须出现在 transition 规则之后，且只对首次渲染生效；后续切换（如 open → close → open）不受影响。
为什么 DevTools 里看不到 transition 效果
常见原因有三个，按优先级排查：
- DevTools Elements 面板中，
transition声明显示为none→ 大概率是语法缺参数，或用了all，或 timing function 拼错（比如easein而非ease-in） - 目标元素当前 computed style 里
display是none，但没触发 class 切换 → 动画根本没启动，检查 JS 是否真改了 class - 元素被父级
overflow: hidden或filter截断，导致合成层降级 → 打开 Chrome DevTools 的 Layers 面板，确认该元素是否成了独立图层
真正容易被忽略的是：allow-discrete 不是“让 display 变平滑”，而是“让 display 至少有个 50% 分界点”。别指望它像 opacity 过渡那样自然——它的价值是让原本完全无动画的场景，终于有了可感知的节奏感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
