图片

我们在平常写动画的时候,经常会遇到元素的高度 height:auto或者 100% 时,无法触发过渡动画效果。[1]

这是浏览器一直存在的问题,这个问题最早可以追溯到距今2013年,可以说是由来已久的问题了。

图片

问题复现

我们先来复现一遍这个问题。

图片

当我们将盒子的高度从 0 变成 auto 或者 100% 的时候, 盒子是没有过度动画的。显示得很生硬。

不过我们可以使用其他的方式去使得这个过渡动画生效,方法有很多,这里就不过多追溯了。

calc-size 插值计算属性

\`calc-size\`[2] 属性是一个最最新提出的属性, 和 calc 类似,都是可以计算的。现阶段还在一个草案阶段,但是浏览器已经有支持的计划了,预计在 chrome 129 版本就正式发布了。

如果要在浏览器中体验这个属性,可以在 chrome://flags/ 中开启 Experimental Web Platform features 进行体验

图片

基础语法

<calc-size()> = calc-size( <calc-size-basis>, <calc-sum>? )
  • calc-size-basis: 可以是 pxautomax-contentpercent 等等

图片

图片

图片

  • calc-sum:表示只可以进行 css 单位进行 相加、相减 操作

图片

使用示例

通过使用 calc-size 属性计算高度的插值过程,这样就可以实现高度从 0 到 300px 的高度过渡变化。

图片

interpolate-size 全局属性

\`interpolate-size\`[3] 可以让我们在根元素上设置插值计算的规则,这样针对整个页面都会生效。

interpolate-size 有两个值,一个是 allow-keywords 所有关键字,一个是仅限数字 numeric-only

numeric-only

设置了这个属性之后,如果插值的属性值不是数字的话,就不会产生过渡的效果

图片

只有设置了数字,过渡才会生效。

图片

allow-keywords

设置了这个属性,只要是合法的属性值,都会插值计算,从而都会产生过渡效果。

图片

小结

相信再过上一两年, calc-size支持计划[4],我们就可以在浏览器中使用 cacl-size 插值计算属性了。到时候就不需要再用 hack 的方法处理过渡效果。

图片

如果这篇文章对你有帮助,欢迎点赞、关注➕、转发 ✔ !

参考资料

[1]

问题: https://issues.chromium.org/issues/40339056

[2]

calc-size: https://drafts.csswg.org/css-values-5/#funcdef-calc-size

[3]

interpolate-size: https://github.com/WebKit/standards-positions/issues/348

[4]

上一两年: https://chromestatus.com/feature/5196713071738880


前端蛋卷
238 声望4 粉丝