CSS transition-behavior 怎样让 display 切换也参与过渡

做一个可关闭的提示卡时，最容易遇到的现象是：opacity 可以渐隐，display: none 却会立刻生效，结果卡片刚开始淡出就从布局中消失。原因在于 display 不是连续数值，浏览器不会自动计算中间帧。

解决办法是把它当成离散属性处理：在过渡声明中加入 display，并使用 allow-discrete。实际项目还应让 opacity 负责视觉变化、display 负责可见性和布局，再用降级声明照顾旧浏览器。

核心写法是 transition: opacity .25s, display .25s allow-discrete;。显示时 display 会在过渡开始就切到可见值，隐藏时会在过渡结束才切到 none。

先分清 display 为什么不能按普通属性渐变

opacity: 1 到 opacity: 0 有连续的数值区间，浏览器可以逐帧计算；display: block 到 display: none 没有“半显示”的中间状态，因此它的动画行为是离散翻转。默认的 transition-behavior 是 normal，不会为这类属性启动过渡。

这不意味着 display 会像透明度一样慢慢变成半个元素。对于 none 与可见值之间的切换，浏览器会让元素在整个动画期间保持可见：进入时在 0% 切到可见值，退出时在 100% 才切到 none。这样 opacity 的淡入淡出才有机会完整呈现。

给 display 声明 allow-discrete

最小组件可以先把状态写成一个 class。第一条 transition 是兼容性兜底，第二条把 display 加入新能力；不支持第二条的浏览器仍可使用 opacity 的淡出效果。

.notice {
  opacity: 1;
  display: block;
  /* 中文说明：旧浏览器至少保留透明度过渡。 */
  transition: opacity 250ms ease;
  /* 中文说明：allow-discrete 允许 display 在过渡边界翻转。 */
  transition: opacity 250ms ease, display 250ms ease allow-discrete;
}

.notice.is-hidden {
  opacity: 0;
  /* 中文说明：退出动画结束后，元素才从布局中移除。 */
  display: none;
}

如果想把长写法拆开，也可以写成 transition-property: opacity, display、transition-duration: 250ms 和 transition-behavior: allow-discrete。关键是三者要同时存在：只写 transition-behavior 而没有非零时长和属性列表，不会凭空产生动画。

切换提示
这是一条可关闭的提示

首次显示时补上 @starting-style

如果元素一开始就是 display: none，后来第一次变成可见，普通 transition 可能没有“旧状态”可以过渡。@starting-style 为首次样式更新提供起点，适合新插入 DOM 的卡片、popover 和 dialog。

.notice {
  display: block;
  opacity: 1;
  transform: translateY(0);
  /* 中文说明：display 负责显隐，opacity 与 transform 负责视觉变化。 */
  transition:
    opacity 250ms ease,
    transform 250ms ease,
    display 250ms ease allow-discrete;
}

.notice.is-hidden {
  display: none;
  opacity: 0;
  transform: translateY(-8px);
}

@starting-style {
  .notice:not(.is-hidden) {
    /* 中文说明：首次显示从透明和上移状态进入最终状态。 */
    opacity: 0;
    transform: translateY(-8px);
  }
}

起始样式只解决“第一次出现”的起点，不会在元素已经显示后每次都重新套用。写 standalone 规则时要注意放置顺序和选择器优先级；如果采用嵌套写法，也要确认目标浏览器对该语法的支持。

保留旧浏览器的降级路径

不要把 display 当作唯一的动画属性。旧环境忽略 allow-discrete 时，至少应该得到一个可理解的瞬间隐藏结果，或者继续让 opacity 工作。对于必须兼容旧浏览器的组件，可以把离散增强放进特性查询。

.dialog {
  /* 中文说明：基础方案先保证内容可见、可读和可关闭。 */
  opacity: 1;
  transition: opacity 200ms ease;
}

.dialog.is-hidden {
  opacity: 0;
}

@supports (transition-behavior: allow-discrete) {
  .dialog {
    /* 中文说明：支持时再让 display 延迟到退出过渡结束。 */
    transition: opacity 200ms ease, display 200ms ease allow-discrete;
  }

  .dialog.is-hidden {
    display: none;
  }
}

如果组件使用 popover，除了 display，还可能需要把 overlay 纳入离散过渡，避免元素过早离开 top layer。普通卡片通常不需要这一层；不要把 popover 的专用处理机械复制到所有组件。

常见问题

为什么写了 allow-discrete 还是看不到淡出？ 先确认 display 确实在 transition-property 中，并且有非零 duration；然后检查元素是否被父级提前设为 display: none，以及是否在动画结束前被 JavaScript 删除。

display 会不会真的产生中间状态？ 不会。它仍然是离散翻转，连续的视觉效果来自 opacity、transform 等属性；display 只是决定翻转发生在动画开始还是结束。

什么时候应该继续用 JavaScript 延迟删除？ 如果组件需要在动画结束后清理 DOM、释放焦点或同步业务状态，可以监听过渡结束并做清理；但不要依赖一个未定义的固定延迟来猜测动画是否完成。

小结

让 display 参与 CSS 过渡的关键不是把它变成连续动画，而是使用 allow-discrete 指定离散翻转时机，再用 opacity 或 transform 承担视觉变化。新元素首次出现时补 @starting-style，组件需要兼容旧环境时保留 opacity 方案，popover 则额外关注 overlay 和 top layer 的生命周期。