CSS 原生弹窗关闭动画怎么保留：@starting-style 与离散过渡的兼容写法

原生

最小可靠组合是：普通属性先写一份兼容过渡，再补一份带 allow-discrete 的过渡；进入动画用 @starting-style，顶层弹层再把 overlay 一起过渡。

为什么 opacity 写了，关闭动画还是看不见

先看最常见的写法。按钮给

dialog {
  opacity: 1;
  transition: opacity 220ms ease;
}

dialog.is-closing {
  opacity: 0;
  display: none;
}

浏览器必须在关闭状态下立刻应用 display: none，元素才不会继续占据交互层。结果就是透明度还没有走完，元素已经从渲染树里消失了。这个结果先别下结论说 CSS 过渡失效，真正缺的是“让离散状态在动画结束时再切换”的规则。

@starting-style 解决的是第一次出现没有起点

普通元素从一个已有样式变到另一个样式时，浏览器能找到起点；新打开的 dialog 或 popover 往往是从不可见状态直接进入顶层，没有上一帧可用。@starting-style 就是为这种“第一次获得样式”的元素提供起始值。

dialog {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease,
              display 220ms allow-discrete,
              overlay 220ms allow-discrete;
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: translateY(12px);
  }
}

这里的 @starting-style 只负责进入时的初始透明度和位置，不负责关闭时的延迟隐藏。关闭动画仍要依赖状态选择器和离散过渡。

用 display 和 overlay 把进入、退出两条路径接上

以原生 dialog 为例，可以把默认状态和打开状态写在一起。display 让内容在整个淡出期间保持可见；overlay 则让顶层元素不要过早离开 top layer。

dialog {
  opacity: 0;
  transform: translateY(12px);
  display: none;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    display 220ms allow-discrete,
    overlay 220ms allow-discrete;
}

dialog[open] {
  opacity: 1;
  transform: translateY(0);
  display: block;
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: translateY(12px);
  }
}

进入时，display 会在动画开始就切到可见值，内容不会被隐藏；退出到 none 时，支持该能力的浏览器会让弹层保持可见直到过渡结束。overlay 的作用类似，不过它针对的是顶层弹层的归属，不是普通块级元素的布局。

兼容写法要分成两层

不要只把 allow-discrete 塞进唯一一条 transition。旧浏览器遇到不认识的值时，整条声明可能被丢弃，连 opacity 和 transform 的动画也会一起失效。先写普通属性，再写增强声明，旧环境至少还能完成基础淡入淡出。

dialog {
  transition: opacity 220ms ease, transform 220ms ease;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    display 220ms allow-discrete,
    overlay 220ms allow-discrete;
}

@supports (transition-behavior: allow-discrete) {
  dialog {
    transition-behavior: allow-discrete;
  }
}

第二条声明会覆盖第一条，但只在支持离散过渡的浏览器里成立。若项目还要覆盖较旧的内置浏览器，可以用 JavaScript 在 transitionend 后再关闭 dialog；这属于降级路径，不要和现代 CSS 路径同时改动同一个状态。

把可访问性和状态检查补齐

关闭动画期间仍要阻止重复提交

视觉上弹层还在，并不代表按钮应该继续可用。关闭按钮点击后立即设置业务状态，必要时加一个短暂的 data-transitioning 标记，避免用户连续触发两次关闭逻辑。

减少动态效果时直接跳过位移动画

对 prefers-reduced-motion: reduce 的用户，可以保留 display 的正确切换，把 opacity 和 transform 的时长压到极短。功能状态应该照常完成，变化只是少做视觉运动。

@media (prefers-reduced-motion: reduce) {
  dialog {
    transition-duration: 1ms;
  }
}

用浏览器面板确认四个状态

打开 DevTools，依次检查初始、打开、关闭过渡中和关闭完成四个时刻：open 属性是否变化，display 是否在正确时机切换，overlay 是否仍在 top layer，关闭后焦点是否回到触发按钮。只截一张“看起来能动”的画面，查不出状态时序问题。

相关问题

@starting-style 能替代所有 CSS 动画吗？

不能。它只为首次样式更新提供过渡起点，常用于新插入、首次显示或 top layer 元素；关键帧动画、已有元素的常规状态变化仍按原来的规则处理。

为什么 display 需要 allow-discrete？

display 不是连续数值，默认不能像 opacity 那样逐帧插值。allow-discrete 明确告诉浏览器允许它参与离散过渡，并在 none 与可见值之间选择合适的切换时机。

不支持这些属性的浏览器怎么办？

保留普通 opacity/transform 过渡，并把动画视为增强体验。功能上仍应能打开、关闭和恢复焦点；如果产品必须保证退出动画，再用状态类配合 transitionend 做 JavaScript 降级。

采用前记住一个判断

原生弹层的动画问题，先按“连续属性”和“离散属性”拆开看：opacity、transform 负责视觉变化，display、overlay 负责元素何时仍存在。前者写好不代表后者会等待。把四个状态在 DevTools 里走一遍，再决定是否需要降级代码，通常比继续调 easing 更快找到原因。