使用 CSS 将 height: 0 变为 height: auto

CSS 过渡是创建交互性的好方法。, transition 到元素的初始状态,浏览器就会动画显示这两种状态之间的转换。 元素固有变量的转换,如 auto 几十年来一直是网络开发人员的难题,唯一的选择就是使用 JavaScript 动态计算高度。


另一个挑战是在元素接收到第一个样式时开始转换,例如,在元素添加到 DOM 或 display-的价值 none 本文将介绍如何使用新的 CSS 功能来解决这一问题,例如 calc-size(), interpolate-size, @starting-styletransition-behavior 可以掌握。

解决方案 calc-size()

如果一个 DOM 元素从封闭状态 (height: 0)变为打开状态 (height: auto),动画通常不会被执行,尽管 transition-这是因为浏览器不会将转换设置为固有变量,如 auto 新的 calc-size()-函数可以对这些固有变量进行计算,因此也可以对过渡进行计算:

f95f6dcb193aa903adc84ce47bc4a296

"(《世界人权宣言》) calc-size()-功能还不能在所有浏览器中使用,可以通过保留原来的 height: auto-声明。

解决方案 interpolate-size

"(《世界人权宣言》) interpolate-size-属性允许您定义浏览器的插值行为,并决定是否在关键字(如 auto 默认情况下,插值只在数值之间进行。 allow-keywords 但是,您可以激活关键字之间的转换:

f95f6dcb193aa903adc84ce47bc4a296

interpolate-size: allow-keywords:root-元素,就可以激活整个页面的新行为。

display:none

另一个问题出现在 display:none 到可见状态。 display 不是可动画属性,就没有动画。 新的 CSS 函数在这方面提供了帮助 @starting-styletransition-behavior:

f95f6dcb193aa903adc84ce47bc4a296

transition-behavior: allow-discrete 确保动画在 display-的价值 block 关于 none 有了这些规则,即使在初始样式更新时也能执行转换。 @starting-style-规则确保动画在第一次样式更新时正确执行。

浏览器支持

新物业目前正在 calc-size()interpolate-size 还不是所有浏览器都支持,在 Chrome 浏览器中,它们可以在实验标志后面使用,但在 Safari 和 Firefox 中还不支持。 支持 transition-behavior 在 Chrome 浏览器和 Edge 浏览器中使用,但在 Safari 和 Firefox 浏览器中没有,希望今后能有所改变。

背部