1. 题目与适用场景
一个对话框通过 display: none 隐藏，产品希望它淡入、淡出并在动画结束后离开布局。团队只给 opacity 添加了 transition，结果打开时没有进入动画，关闭时元素立刻消失。请解释离散属性的限制，设计 CSS 方案，并说明浏览器降级、焦点管理和 prefers-reduced-motion。
2. 面试官考察点
- 是否知道
display、content-visibility等离散属性不会产生连续中间值。 - 是否能正确使用
transition-behavior: allow-discrete或 shorthand，而不是把它误当作动画时长。 - 是否理解进入和退出时的翻转时刻不同，且
@starting-style负责建立初始样式。 - 是否把兼容性、无障碍、焦点、减少动效和真实渲染测试纳入答案。
3. 回答前需要澄清的问题
- 组件是普通元素、原生 dialog 还是 popover 顶层元素？
- 隐藏后是否必须离开布局、不可聚焦，还是只需跳过绘制？
- 支持的浏览器范围和无法使用离散过渡时的降级是什么？
- 动画期间焦点、Escape、点击遮罩和减少动效偏好如何处理？
4. 30 秒回答框架
display 是离散属性，默认不会在两个值之间产生 transition。用 transition-behavior: allow-discrete 明确允许离散属性参与过渡，并同时给 opacity 或 transform 设置非零时长。隐藏到显示时要让元素在整个进入动画期间可见，显示到隐藏时要让它保持可见直到动画结束；@starting-style 可提供首次插入时的起始值。旧浏览器保留 opacity/transform 的连续动画，并接受瞬时 display 切换；同时管理焦点、减少动效和可访问状态。
5. 分步骤深入解答
第一步：区分连续与离散属性
opacity 和 transform 可以计算连续中间值；display 只有取值切换。没有 allow-discrete 时，浏览器会在状态变化时立即切换 display，所以关闭动画还没开始元素就被移除，打开动画也没有可见的初始帧。transition-behavior 只决定是否允许离散属性过渡，仍需要 transition-property 和非零 transition-duration。
第二步：为普通面板建立双向过渡
先写连续属性的兼容声明，再写带 allow-discrete 的声明。退出时 display 应在 100% 附近翻转，确保内容保持可见；进入时应尽早翻转到可见值。不要只写 transition-behavior 而忘记 opacity 或 transform 的目标状态。
.panel {
opacity: 0;
transform: translateY(-0.5rem);
display: none;
transition: opacity 180ms ease, transform 180ms ease;
transition: opacity 180ms ease, transform 180ms ease, display 180ms allow-discrete;
}
.panel[data-open="true"] {
opacity: 1;
transform: translateY(0);
display: block;
}第三步：处理首次进入和 popover
动态插入或 popover 首次打开时，元素可能没有旧的可见样式可供比较。@starting-style 可声明打开状态的起始 opacity 和 transform。原生 popover 还会进入 top layer，必须把 display 和 overlay 纳入离散过渡，否则退出时会直接从顶层移除。不同浏览器对这些组合的支持要用目标版本实测。
第四步：设计降级与能力检测
旧浏览器会忽略未知的 allow-discrete，但应仍保留基础 opacity/transform 过渡。可以用 @supports (transition-behavior: allow-discrete) 包住增强规则，避免把整组基础样式放进去。降级状态必须仍可打开、关闭、聚焦和读取，不应因为动画功能缺失而把内容永久隐藏。
第五步：无障碍、性能与验证
动画不等于可访问状态。关闭后的对话框需要同步 hidden、aria-hidden 或原生 dialog 状态，并把焦点返回触发按钮；打开时把焦点移入并支持 Escape。prefers-reduced-motion: reduce 下缩短或移除时长。验证时检查布局、绘制、键盘焦点、屏幕阅读器、快速重复开关和中断动画，并记录低端设备的合成与布局成本。
6. 高质量示范回答
display是离散属性，不能像 opacity 一样产生连续中间值。我的基础规则先过渡 opacity 和 transform，再用transition-behavior: allow-discrete把 display 纳入增强路径；进入时先切到可见值，退出时保持可见直到动画末尾。首次打开用@starting-style提供起始帧，popover 还要处理 top layer 的 display 和 overlay。旧浏览器忽略增强声明但仍有基础动画。代码之外，我会同步焦点、Escape、隐藏语义和 reduced-motion，并用多浏览器和键盘测试确认不会闪烁或把内容留在可聚焦状态。
7. 常见错误
- 只给 opacity 写 transition → display 立即切换 → 使用 allow-discrete 并保留连续属性动画。
- 把
transition-behavior当作 duration → 离散属性仍无动画 → 同时声明 property 和非零 duration。 - 关闭时 display 先变 none → 用户看不到淡出 → 让离散翻转与退出时长对齐。
- 忽略首次插入 → 第一次打开没有进入动画 → 用
@starting-style建立初始状态。 - 只测鼠标和现代浏览器 → 键盘、读屏或旧浏览器状态错误 → 加入 supports 降级、焦点和 reduced-motion 验证。
8. 追问及应对
追问一：为什么关闭时 display 要在动画结束才切换？
如果提前切换成 none，元素会离开布局和渲染树，opacity 的剩余时长没有可见内容。让它保持可见到 100% 附近，才能完成淡出，再进入隐藏状态。
追问二：allow-discrete 会让 display 逐帧插值吗？
不会。它允许离散值参与 transition，但值仍在特定时间点翻转；连续视觉应由 opacity、transform 等属性提供。
追问三：怎样让旧浏览器仍可用？
先声明不包含 allow-discrete 的基础 transition，再用 @supports 或后续声明增强。功能缺失时接受 display 瞬时切换，但保持按钮、焦点和隐藏语义正确。
追问四：如何处理 reduced-motion？
在 prefers-reduced-motion: reduce 下把 duration 降到很短或设为零，同时保留状态同步、焦点移动和可关闭操作；不要只隐藏动画而留下不可见但可聚焦的元素。