CSS transition-behavior让display none也有动画效果
内容提要
这篇文章介绍了CSS的新属性transition-behavior和@starting-style，可以实现元素从display:none到display:block的过渡效果，并且可以有动画效果。这些新属性使得CSS在Web开发中的交互效果更加强大。
延伸解读
为什么传统 transition 对 display 无效
文章指出，display 属于离散 CSS 属性，其值变化不会像 opacity 那样产生中间状态。当元素从 display:none 变为 block 时，浏览器在同一个渲染帧内完成显示和透明度变化，因此看不到过渡动画。过去需要借助 JS 分步设置或 CSS animation 来绕过，而 transition-behavior 正是为了解决这一限制而出现。
transition-behavior 与 @starting-style 的分
transition-behavior: allow-discrete 让 display 这类离散属性也能参与过渡，但它主要保证元素在过渡结束后才真正隐藏，因此淡出效果可见。而元素从隐藏到显示时，由于缺少起始透明度，仍无动画。@starting-style 则专门声明过渡起点样式，例如在显示前将 opacity 设为 0，从而让淡入效果也能生效。两者配合才能实现完整的显隐动画。
对 popover 和 dialog 等原生组件的意义
文章提到，popover 浮层和 dialog 对话框的显隐通常基于 display 计算值。过去为它们添加过渡动画比较麻烦，现在借助 transition-behavior 和 @starting-style，可以直接用 CSS 实现更平滑的显示与隐藏效果。这弥补了原生 HTML 元素在交互动画上的长期不足，也减少了额外 JS 或复杂动画代码的依赖。
Q&A
transition-behavior属性的作用是什么？
transition-behavior属性允许离散CSS属性（如display）支持过渡效果。
@starting-style规则的用途是什么？
@starting-style规则用于声明过渡的起始样式，解决了透明度动画的问题。
如何实现元素从display:none到display:block的动画效果？
可以使用transition-behavior属性和@starting-style规则来实现该动画效果。
使用transition-behavior时需要注意什么？
设置transition-behavior: allow-discrete可以让opacity的过渡动画可见，但display的变化仍然是瞬间的。
这两个新属性对Web开发有什么影响？
这两个新属性增强了CSS在Web开发中的交互效果，提升了用户体验。
如何在CSS中实现淡入淡出效果？
可以通过设置transition属性和使用@starting-style规则来实现淡入淡出效果。
