CSS @starting-style 首次显示动画怎么做：popover 与 dialog 的初始状态和降级边界

一个弹窗从隐藏变成可见时，如果它直接从 opacity: 0 跳到 opacity: 1，问题通常不在 transition 写错，而在浏览器没有拿到“第一次显示之前”的样式。普通元素、popover 和 dialog 都会遇到这个边界。CSS @starting-style 用来补上这帧起始状态，再配合 display、overlay 和能力检测，才能让打开动画顺滑、关闭动画也不突然消失。

为什么第一次打开没有过渡帧

transition 需要比较“变化前”和“变化后”两个已知状态。一个元素从 display: none 进入渲染树时，浏览器往往只看到了最终的可见样式；你虽然写了 opacity: 0，但那一帧并没有真正参与过渡。于是首次打开像硬切，第二次打开却又可能正常，造成很难复现的错觉。

@starting-style 的作用就是声明这次进入可见状态时的起始样式。它不是 JavaScript 钩子，也不是额外的动画 API；它只是给 CSS 状态机补了一条入口。

最小写法：让普通弹层从下方淡入

先把最终状态写在普通规则里，再用 @starting-style 描述第一次显示时的样子。这样即使动画不运行，用户仍然能看到内容。

.notice {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

@starting-style {
  .notice {
    opacity: 0;
    transform: translateY(12px);
  }
}

这里的边界很明确：transition 定义变化怎么走，@starting-style 定义首次出现从哪里开始。把过渡属性只写在 starting-style 里，通常会让后续状态变化失去一致性。

popover 和 dialog 为什么还要处理 display 与 overlay

原生 popover 和 dialog 的可见性由浏览器管理，不能只靠 opacity 把它们“假装隐藏”。如果元素已经从渲染树移除，透明度过渡没有播放空间。现代浏览器允许把 display 纳入离散过渡，并用 allow-discrete 告诉浏览器这个属性可以和其他过渡一起安排。

[popover] {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    display 180ms allow-discrete,
    overlay 180ms allow-discrete;
}

[popover]:popover-open {
  opacity: 1;
  transform: translateY(0);
}

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

对话框的选择器可以换成 dialog[open]，思路不变。overlay 的价值在于关闭阶段：弹层要等视觉过渡结束后再离开顶层显示层，否则用户看到的仍然是突然消失。实际项目里，先用开发者工具确认最终状态和关闭状态，再决定是否需要它。

把打开、关闭和浏览器降级拆成三层

可以用 @supports (selector(:popover-open)) 或 @supports (transition-behavior: allow-discrete) 做能力分层，但不要把整个弹层功能包在支持判断里。降级版本只需要少一个动画，不应该少一个按钮、少一段内容或失去 Escape 关闭。

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

@supports not (transition-behavior: allow-discrete) {
  [popover], dialog {
    transition: opacity 120ms ease, transform 120ms ease;
  }
}

上线前用四个状态做验收

不要只点击一次“打开”就判定效果合格。至少覆盖首次打开、重复打开、关闭过程中再次打开，以及不支持离散过渡的降级环境。尤其要观察关闭期间能否正常操作页面、焦点是否回到触发按钮，以及内容会不会在动画中途被截断。

• 首次打开：弹层从预设起始位置滑入，文字不会先闪现再移动。
• 关闭：透明度和位移过渡完成后再退出可见层，背景不会残留多余遮罩。
• 键盘路径：打开后焦点自动落到合理位置，按 Escape 关闭后焦点回到触发点。
• 减少动效：动画时长接近零，但结构、焦点和关闭逻辑保持完全一致。

常见问题

@starting-style 能不能替代 JavaScript 动画库？

它适合CSS状态明确、过渡关系简单的入口动画场景，不能替代需要精确时间轴、手势或复杂编排的动画库。优先用原生规则实现弹层基础动效，再判断是否需要引入额外的第三方依赖。

为什么第二次打开有动画，第一次却没有？

第二次打开可能存在可比较的上一帧，而第一次从未渲染状态进入可见状态。把起始值放进 @starting-style，并确认最终规则上的 transition 属性完整，通常就能解决。

不支持 @starting-style 时页面会坏吗？

只要默认规则保留可见状态、原生关闭方式和焦点处理逻辑，不兼容的环境下通常只会缺失首次过渡效果。降级的核心要求是保证功能完整，不需要强行和高版本浏览器的视觉效果完全对齐。

小结

处理首次显示动画时，先分清结构、状态和动效三层：原生开关负责可用性，普通规则负责最终状态，@starting-style 负责补上入口帧。popover 和 dialog 再把 display、overlay、键盘焦点及减少动效偏好纳入验收，弹层才不会只在演示环境里顺滑。