文章预览
众所周知，有些属性是不支持过渡动画的，比如高度 auto div { height : 0 ; transition : 1 s } .wrap :hover div { height : auto } 效果如下 要实现过渡效果，之前提供过一个 grid 布局方式，原理是利用 grid 的尺寸单位 1fr 支持过渡的特性，有兴趣可以回顾这篇文章： CSS 如何让auto height完美支持过渡动画 不过到了现在，一切都变简单了， Chrome 129 支持了 auto 的过渡效果，快速了解一下吧 一、calc-size 函数 现在要实现 auto 的过渡效果，需要用到一个全新的 calc-size 函数 看到这个函数，是不是和 calc 比较类似？没错，这是一个可以将一些关键词转换成具体尺寸的函数。 回到上面这个例子，只需要将高度改成 calc-size(auto) ，如下 div { height : 0 ; transition : 1 s } .wrap :hover div { height : calc-size ( auto ) } 现在就有过渡效果了（Chrome 129+ 或者 Chrome 127+开启实验
………………………………
