我们在平常写动画的时候,经常会遇到元素的高度 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: 可以是
px
、auto
、max-content
、percent
等等
- 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]
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。