如何在不使用 JavaScript Hack 的情况下为 display: none 添加动画

若要仅使用 CSS 为元素从 display: none 状态进入或退出添加动画，只需在 transition 中加入 display 属性并配合 allow-discrete 关键字，同时在 @starting-style 规则中提供入场初始状态——无需 JavaScript，无需 setTimeout，也无需监听 transitionend 事件。实现这一效果依赖两项新特性：transition-behavior: allow-discrete 允许 display 等离散属性参与过渡动画，而 @starting-style 则为浏览器提供一个”显示前”的状态，作为入场动画的起点。本文将为你提供可直接复用的退场与入场代码示例、dialog/popover 顶层（top-layer）场景中 overlay 的注意事项，以及对当前浏览器支持情况的客观分析。

为什么 display: none 过去无法添加过渡动画

CSS 过渡动画需要一个”变化前”的样式状态作为起点。处于 display: none 状态的元素——或刚被插入 DOM 的元素——没有已渲染的前置状态，因此浏览器历来无从进行插值计算，过渡动画也就无从触发。这正是开发者不得不借助 setTimeout 切换 class，或使用双 requestAnimationFrame 强制重排等 hack 手段的根本原因。

常见的替代方案——通过 opacity: 0 实现淡出并将元素保留在 DOM 中——并非真正的解决方案。opacity: 0 会将元素保留在布局流、Tab 键焦点顺序和无障碍树中，因此键盘用户和屏幕阅读器用户仍然可以访问那些看似已消失的内容。而 display: none 则会将元素从上述三者中完全移除。在实际项目中，对半迁移组件的会话回放（session replay）恰恰暴露了这类 bug：用户通过 Tab 键或点击进入一个看似已关闭的面板，而该面板实际上只是被淡出，从未真正从布局中移除。为真正的 display: none 添加动画，可以从根本上消除这类问题。

解决问题的两项 CSS 特性：allow-discrete 与 @starting-style

display 是一个离散属性——它无法在两个值之间进行插值，本质上是一个开关。离散属性在动画过渡中通常会在两个值之间的 50% 处发生切换；但有一个例外：当动画涉及 display: none 或 content-visibility: hidden 的进入或退出时，浏览器会调整切换时机，以确保过渡内容在整个动画过程中始终可见。方向至关重要：当 display 从 none 过渡到 block 时，值会在动画时长的 0% 处切换为 block，从而在整个过程中保持可见；当从 block 过渡到 none 时，值会在 100% 处切换为 none，同样确保全程可见——这正是淡出效果在两个方向上都能正常显示的原因。

要启用此特性，需在 display 的过渡声明中设置 transition-behavior: allow-discrete，并通过 @starting-style 提供入场初始状态。

退场方案：过渡到 display: none

若要让元素淡出并从布局中移除，需在 transition 中加入带有 allow-discrete 的 display，并设置隐藏状态：

.panel {
  opacity: 1;
  transition: opacity 0.3s ease, display 0.3s allow-discrete;
}

.panel.is-hidden {
  opacity: 0;
  display: none;
}

opacity 在 300ms 内动画至 0；display 在动画进行至 100% 之前始终保持可见值，随后切换为 none。若在 display 上忘记添加 allow-discrete，元素将立即消失——这是使用此技术时最常见的错误。

入场方案：从 display: none 开始动画

对于初始状态为隐藏的元素，需将”显示前”的样式值放入 @starting-style 规则中。借助 CSS 嵌套语法，整个声明可以写在同一个代码块内：

.panel {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease, display 0.3s allow-discrete;
}

.panel.is-open {
  display: block;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

顺序至关重要。@starting-style 与其目标规则具有相同的优先级，因此它必须位于展开状态声明之后，才能在层叠中生效。此外还有一个单行陷阱：若将 transition-behavior: allow-discrete 声明在 transition 简写属性之前，浏览器将忽略该 transition-behavior。单独书写时，它必须放在最后：

.panel {
  transition: opacity 0.3s, display 0.3s;
  transition-behavior: allow-discrete; /* 必须位于简写属性之后 */
}

针对旧版浏览器，MDN 的跨浏览器方案会声明两次 transition——第一次不含 allow-discrete，以提供跨浏览器兼容性，确保其他属性在不支持 transition-behavior 的浏览器中仍能正常过渡。

Dialog 与 Popover：overlay 的注意事项

顶层（top-layer）元素——<dialog> 以及使用 popover 属性的元素——是最具价值的应用场景，同时也有额外的要求。对于 dialog 和 popover，还必须为 overlay 添加 ... allow-discrete 过渡，否则元素会立即从顶层移除，导致退场动画无法显示：

dialog {
  translate: 0 100vh;
  transition:
    translate 0.4s ease-out,
    display 0.4s allow-discrete,
    overlay 0.4s allow-discrete;
}

dialog[open] {
  translate: 0 0;

  @starting-style {
    translate: 0 100vh;
  }
}

对于 popover，将 dialog[open] 替换为 :popover-open 伪类即可。overlay 属性的作用是延迟元素从顶层移除的时机：它确保元素从顶层的移除操作被推迟到动画完成之后；在更复杂的场景中，若不进行此处理，元素可能过早地从 overlay 中移除，导致动画不流畅甚至完全失效。

有一点需要坦诚说明，这是其他资料常常略过的：overlay 尚未成为 Baseline 标准。MDN 将其标记为实验性特性——该功能尚未成为 Baseline，因为它在部分主流浏览器中仍不受支持。应将其视为渐进增强；在不支持的浏览器中，dialog 仍可正常打开和关闭，只是不会有延迟退场效果。

浏览器支持与优雅降级

@starting-style 和 transition-behavior: allow-discrete 均随 Firefox 129 的发布而成为 Baseline Newly Available 特性，发布时间为 2024 年 8 月 6 日。但为 display 本身添加动画所需的条件不止于此。该功能在 Chrome 和 Edge 117+ 以及 Safari 18+ 中可用——Safari 17.4 新增了 transition-behavior 支持，17.5 新增了 @starting-style 支持，但配合两者为 display 添加过渡动画仅在 Safari 18 起才能正常工作。Firefox 129+ 同时支持这两项特性，但截至 2026 年中期，它仍不支持对 display 属性进行过渡，因此在 Firefox 中元素依然会直接显示或隐藏，不会有任何过渡效果。在 @keyframes 中使用 display 自 Chrome 116 起已可支持。

这完全是渐进增强的实践。在不支持这些特性的浏览器中，从顶层或 display: none 状态进入的元素将直接出现在页面上，不会有任何过渡效果，与当前行为一致。无需 polyfill，无需 JavaScript 降级方案。如需明确划定增强边界，可通过特性检测进行条件控制：

@supports (transition-behavior: allow-discrete) {
  /* 现代入场/退场动画 */
}

何时应改用 View Transitions

当你需要切换已有元素的可见性时，使用上述过渡方案。当你需要添加或移除 DOM 节点时，则应改用 View Transitions API。同文档视图过渡（same-document view transitions）已于 2025 年 10 月 14 日成为 Baseline Newly Available，随 Firefox 144 在同日发布——支持 Chrome 111+、Edge 111+、Safari 18+ 和 Firefox 144+。将 DOM 变更操作包裹在 document.startViewTransition() 中，并为不支持的浏览器提供普通降级方案：

if (document.startViewTransition) {
  document.startViewTransition(() => card.remove());
} else {
  card.remove();
}

现代方案终结了过去繁琐的 JavaScript 编排：在 transition 中加入带有 allow-discrete 的 display，在 @starting-style 中定义入场初始状态，为顶层元素添加 overlay 过渡，并让不支持的浏览器回退到即时切换。丢掉 setTimeout，用纯 CSS 来实现吧。

常见问题

为什么我在 display 过渡中添加了 allow-discrete 之后，退场动画仍然不触发？

最常见的原因是单独声明的 transition-behavior: allow-discrete 位于 transition 简写属性之前，导致浏览器静默忽略它。当作为独立属性书写时，transition-behavior 必须位于 transition 简写属性之后，否则简写属性会将其重置。如果将 allow-discrete 内联在 transition 值中，则简写属性内部的顺序不受影响，也不会遇到这个问题。

如果我只想将元素淡出到 display: none，还需要 @starting-style 吗？

不需要。@starting-style 仅在入场动画中才是必需的——即元素从 display: none 状态进入，或刚被插入 DOM，需要一个“显示前”的状态作为动画起点。纯退场动画——将已可见的元素过渡到 display: none——只需在 transition 中加入带有 allow-discrete 的 display，并设置隐藏状态即可。仅当同时需要为元素添加入场动画时，才需要使用 @starting-style。

在不支持 transition-behavior 或 @starting-style 的浏览器中会发生什么？

元素将直接出现或消失，与没有任何动画时的行为完全一致。这是渐进增强的实践，无需 polyfill，也无需 JavaScript 降级方案。对于 dialog 和 popover，不支持非 Baseline 的 overlay 属性的浏览器仍可正常打开和关闭元素，只是不会有延迟顶层退场效果。你可以通过 @supports (transition-behavior: allow-discrete) 规则来明确划定增强边界。

何时应使用 View Transitions API，而非为 display: none 添加动画？

当你需要添加或移除 DOM 节点时，使用 View Transitions；当你需要切换已存在于 DOM 中的元素的可见性时，使用 display 过渡。同文档视图过渡于 2025 年 10 月 14 日成为 Baseline Newly Available，支持 Chrome 111+、Edge 111+、Safari 18+ 和 Firefox 144+。将 DOM 变更操作包裹在 document.startViewTransition() 中，并为不支持的浏览器提供普通降级方案。