CSS 过渡是创建交互性的好方法。, transition
到元素的初始状态,浏览器就会动画显示这两种状态之间的转换。 元素固有变量的转换,如 auto
几十年来一直是网络开发人员的难题,唯一的选择就是使用 JavaScript 动态计算高度。
另一个挑战是在元素接收到第一个样式时开始转换,例如,在元素添加到 DOM 或 display
-的价值 none
本文将介绍如何使用新的 CSS 功能来解决这一问题,例如 calc-size()
, interpolate-size
, @starting-style
和 transition-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-style
和 transition-behavior
:
f95f6dcb193aa903adc84ce47bc4a296
和 transition-behavior: allow-discrete
确保动画在 display
-的价值 block
关于 none
有了这些规则,即使在初始样式更新时也能执行转换。 @starting-style
-规则确保动画在第一次样式更新时正确执行。
浏览器支持
新物业目前正在 calc-size()
和 interpolate-size
还不是所有浏览器都支持,在 Chrome 浏览器中,它们可以在实验标志后面使用,但在 Safari 和 Firefox 中还不支持。 支持 transition-behavior
在 Chrome 浏览器和 Edge 浏览器中使用,但在 Safari 和 Firefox 浏览器中没有,希望今后能有所改变。