CSS实现一个高度过度的动画 ，针对于属性height，设置一个transition动画就能实现我们想要看到的效果。而这个高度在实际情况下， 我们并不希望它是一个固定的值，需要做的更灵活一点，比如随着内容的增减自适应，所以，有人就会想到使用transition将高度从0过度到auto，然而，这样实现动画效果会生效吗？有没有更优秀的技巧或者方法了？

有的，今天和大家聊一聊这个问题。

文章中讲解的DOM结构，如下

效果如下，鼠标移上去的时候，下面这段文字展示（<mark>动画效果</mark> ）

01. height过度0到auto？

默认的时候高度设置成0，鼠标移上去的时候，将高度设置成auto，像下面代码这样

从效果上来看，这个变化是瞬间的，并没有500毫秒过度效果。也就是说CSS不能使用transition实现height从0过度到auto。

这不符合我们的预期效果。

02. height过度0到固定值？

竟然auto不能动画过度，那我们就改成固定的值（最简单的就是改成数字），比如，从0过度到300。这样过度效果就生效了。

虽然这样能过度过去，但这不是一个很优的方法， 因为这样处理的话，我们得通过JS去计算这个高度，才能确保我们的功能不出BUG。

03. max-height过度0到固定值？

为什么不试一下最大高度了？

max-height从0到固定值也是可以animation过去的，唯一不太好的地方就是，我们的内容有可能会溢出，毕竟我们设置的只是一个最大的高度。

如果需求能保证内容的高度永远不会达到一定的值，用这个方法完全没什么问题。我们只需要设置一个适当的最大高度值就好。

04. 过度grid-template-rows？

这个时候，网格布局给我们提供了另外一个巧妙的解决方案。

只需要将grid-template-rows从0fr过度到1fr。如此一来，我们的网格项将从0过渡到其'自然'高度。这应该就是比较完美的解决办法。

代码如下

功能是实现了，我也不得不关注一下这属性的兼容性问题。

注意到chrome从107版本开始支持这个属性。