CSS transition-behavior allow-discrete 的显示切换

如果一个面板通过 display: none 隐藏，再直接切换到 display: block，opacity 的淡入通常看不到，因为元素在过渡开始前就已经被隐藏或显示了。解决办法是把 display 放进 transition，并为它启用 transition-behavior: allow-discrete；首次显示时，再用 @starting-style 提供透明、偏移的起点。

为什么 display 需要 allow-discrete

普通可动画属性可以在两个数值之间连续插值，例如 opacity: 0 到 opacity: 1。display 没有这样的中间值，所以它属于离散属性。transition-behavior: allow-discrete 的作用不是把 display 变成连续动画，而是允许它参与这段过渡：从 none 进入可见状态时尽早切换，离开可见状态时等到过渡结束再切换。

先写一个可打开和关闭的面板

下面的例子用 is-open 控制面板状态。重点是三件事：把 display 列入过渡列表，在同一列表项后写 allow-discrete，以及用 @starting-style 描述首次显示时的透明和位移。

.panel {
  /* 默认隐藏；打开时由 display 负责跨过可见性边界。 */
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 240ms ease, transform 240ms ease,
    display 240ms allow-discrete;
}

.panel.is-open {
  /* 目标状态：先变为可见，再完成视觉过渡。 */
  display: block;
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  .panel.is-open {
    /* 首次从 display:none 出现时的入场起点。 */
    opacity: 0;
    transform: translateY(-8px);
  }
}

打开时，面板会在动画开始阶段切换成可见状态，随后从透明和上移位置过渡到正常状态。关闭时，面板先完成透明和位移过渡，到了结束点才切回 display:none。这正是离散过渡对显示切换的帮助。

用一个状态切换接上交互

CSS 只负责状态之间的样式差异，按钮可以用普通 class 切换触发它。示例中的注释说明了状态来源和可访问性上的基本处理：

  
  显示提示


  这是一个可关闭的提示面板。

如果面板里有可聚焦控件，关闭时还要考虑焦点回到按钮；如果只想视觉隐藏但仍让读屏工具读取，就不要把 display:none 当作唯一方案。动画本身不能替代可访问性状态管理。

兼容性和降级怎么安排

transition-behavior 目前不是所有浏览器都具备同等支持。可以先写一条不包含离散属性的普通过渡，再写增强声明；不认识第二条声明的浏览器，仍然可以完成基本的透明度和位移动画，面板也会正常显示或隐藏。

.panel {
  /* 不支持 allow-discrete 时，保留普通视觉动画。 */
  transition: opacity 240ms ease, transform 240ms ease;
  /* 支持增强语法的浏览器会采用这一条。 */
  transition: opacity 240ms ease, transform 240ms ease,
    display 240ms allow-discrete;
}

相关问题

allow-discrete 会让 display 平滑变化吗？

不会。它允许离散属性参与过渡，但 display 仍然只在离散时点切换；平滑的视觉效果来自 opacity、transform 等连续属性。

关闭时为什么不一定需要 @starting-style？

@starting-style 主要解决元素首次出现时没有旧样式可供比较的问题。关闭通常已经有一个可见的起始状态，所以关键是把 display 和 allow-discrete 写进过渡。

只改 opacity 能代替 display 吗？

不能完全代替。透明元素仍可能占据布局空间、响应点击或出现在无障碍树中；是否使用 display:none、visibility 或其他状态，要按交互和可访问性要求决定。