弹窗出现时没有过渡动画：先检查starting-style是否真正生效

弹窗出现时没有过渡动画：先检查starting-style是否真正生效。按现象、证据和验证结果逐步定位问题，提供可操作的检查顺序，避免把工具输出误当成故障结论。

先确认是没有动画，还是看不到起点

弹窗关闭有动画，打开却突然出现，常见原因是入场时没有可计算的初始状态。DevTools已支持检查CSS的@starting-style。它能帮助观察入场样式，但不会自动修复选择器冲突或错误的交互代码。

按三层检查

先检查元素是否真的从隐藏变成显示。若脚本立即替换整个节点，或者打开动作只改了另一个容器，当前样式可能根本没有应用到目标元素。把DOM变化和类名变化记录下来，再修改CSS。

其次，在Elements里定位实际弹窗，检查最终透明度、变换和transition属性。确认过渡写在持续存在的规则中，起始值与最终值有区别。使用相应的starting-style调试入口观察初始状态，再看它是否被更高优先级规则覆盖。

最后检查用户的减少动态效果设置。若页面尊重该偏好，动画被省略可能是正确行为，不应为了视觉效果强行覆盖。对display等离散属性的处理也要单独核对浏览器支持情况。

验收不只看一次打开

连续打开、关闭、再次打开，检查焦点、点击遮罩和快速切换。动画结束前不应留下透明但拦截点击的层。保留静态可用的交互作为基础，再增加过渡，能避免“效果正常但按钮无法操作”。

本文是排查建议，不把动画时长或某个CSS写法当成通用修复。资料核对：2026-11-02。

参考：官方资料。