使用纯 CSS 实现元素高度的过渡（不采用 max-height）-编程知识

使用纯 CSS 实现元素高度的过渡（不采用 max-height）

1. 前言

不知大家是否接触过元素高度的过渡，之前呢我是使用 CSS 加 JS 的方式来解决的，就是通过 JS 计算一下要过渡的元素的高度，然后自己给它加上 height 为某一数值。不知大家是如何解决的？

相信大家在做高度过渡时，都会在想为什么无法实现？就比如下面的代码。

<style>.details {position: absolute;top: 34px;left: 0px;border-radius: 8px;width: 170px;height: 0;background-color: rgb(112, 232, 253);overflow: hidden;transition: height 1s;}.container {position: relative;display: inline-block;padding: 4px 8px;border-radius: 8px;background-color: rgb(247, 119, 119);}.container:hover .details {height: auto;}
</style><div class="container"><span>hover 元素</span><div class="details">看看您错过了上个月 Google Open Source Live 活动中的哪些精彩内容。了解使用 Istio 观测您的服务、分析流经服务网格的请求等话题！</div>
</div>

实现的效果就是下面的这个样子

动画.gif

2. 实现

可以看到元素的高度无法从 0 过渡到 auto，因为 auto 不是一个数值。

下面我们会讨论一下 max-height 和 transform 来实现它有什么问题。

2.1. max-height 实现的问题

如果我们询问 ChatGPT 来解决这个问题，它大概率就会向你介绍这个方法，但是这个方法并不能很好的解决。下面是使用 max-height 实现的一个效果。

动画.gif

我们通过过渡 max-height 属性来实现这个效果，就是刚开始时过渡元素的 max-height 为 0，当鼠标触发 hover 时，元素的 max-height 属性则过渡到一个比较大的值，例如 1000px。

但是这样有一个缺点，就是鼠标移入时，我们会注意到鼠标刚移入时，元素高度过渡地特别快，感觉就是嗖地一下就完成了过渡；然后还有鼠标移除时，元素的高度并没有立即过渡，因为元素的 max-height 属性此时为 1000px，要从 1000px 过渡到元素的高度，这段距离还要花一段时间，所以感觉上就是元素延迟了一下，再进行过渡。

2.2. transform 实现的问题

当然上面的方法行不通，我们可以再让 ChatGPT 为我们提供其他的解决方法。这个方法大概率也会提供给你。

这个方法的原理就是使用 transform: scale()，即在 scale(0) 和 scale(1) 之间变化，但是这个会压缩元素的内容，如果你认为你能接受，那这个就不是问题。

2.3. grid 网格实现

其实解决元素高度的过渡也很简单，使用 display: grid 就能解决，相信大多数学前端的小伙伴对 grid 了解的并不多，为什么？可能是因为尚硅谷，黑马程序员的课程还没有更新相关的内容吧，哈哈~不知道大家是看尚硅谷还是看的黑马，我是看的 pink 入门的。

话不多说，实现的代码也很简单，下面就给大家完整的代码：

<style>.details {position: absolute;display: grid;grid-template-rows: 0fr;top: 34px;left: 0px;transition: all 2000ms;}.details .content {width: 170px;border-radius: 8px;background-color: rgb(112, 232, 253);overflow: hidden;  }.container {position: relative;display: inline-block;padding: 4px 8px;border-radius: 8px;background-color: rgb(247, 119, 119);}.container:hover .details {grid-template-rows: 1fr;}
</style><div class="container"><span>hover 元素</span><div class="details"><div class="content">看看您错过了上个月 Google Open Source Live 活动中的哪些精彩内容。了解使用 Istio 观测您的服务、分析流经服务网格的请求等话题！</div></div>
</div>