本文翻译自 CSS trick: transition from height 0 to auto!，作者：Francesco Vetere， 略有修改。
假如你在CSS上花了足够长的时间，很可能你曾尝试过从height:0到auto的滑润过渡。。。却发现它不起作用！
️走运的是现在有一个处理这个问题的办法：运用CSS Grid布局能够处理这个问题，并且代码简略，运转的很完美。
让咱们从一个实践的例子开始。我做了这个简略的手风琴作用：
它的HTML十分简略：
<div class="accordion">
<div class="accordion-title">Hover me!</div>
<div class="accordion-body">
<div>
<p>Lorem ipsum ...</p>
</div>
</div>
</div>
假如你将鼠标悬停在手风琴上，你会注意到有一个下拉菜单出现。作用不错，但假如咱们想要添加一个美丽的滑润过渡作用呢？
实践上，我在前面演示的作用中的CSS代码里面对height属性上添加了一个小过渡：
.accordion-body {
height: 0;
transition: 500ms height ease;
}
.accordion:hover .accordion-body {
height: auto;
}
不幸的是，从height: 0转换到height: auto不起作用，正如我之前所说的，是CSS不可能实现的。
怎么处理这个问题？
第一个处理计划是将height属性设置为一个固定的数字，而不是auto。
这是可行的，但它不是一个很好的办法：为了计算这个固定的数字，咱们有必要求助于JavaScript，以计算咱们的.accordion-body实践上有多高。这不是咱们的目标。
事实上，为什么不直接用max-height呢？
.accordion-body {
max-height: 0;
transition: 500ms max-height ease;
}
.accordion:hover .accordion-body {
max-height: 200px;
}
因为咱们为max-height界说了一个固定值，浏览器现在能够正确地履行转换。
仅有的问题是，因为咱们为max-height界说了一个固定值，现在内容可能会溢出。
假如你坚信你的内容永久不会到达必定的高度…那么用这个办法完全能够！只要为max-height运用一个适宜的值，就能够了。
但是要注意，max-height的值越高，过渡就越古怪。
咱们能做得更好吗？咱们能够防止任何固定的height/max-height值吗？
CSS Grid 来解救
咱们实践上能够运用一个简略的技巧，便是用一个网格项制造一个CSS网格。
然后真实要做的便是把咱们的grid-template-rows从0fr过渡到1fr。这样咱们的网格项将从0过渡到它的“天然”高度。
.accordion-body {
display: grid;
grid-template-rows: 0fr;
transition: 250ms grid-template-rows ease;
}
.accordion:hover .accordion-body {
grid-template-rows: 1fr;
}
.accordion-body > div {
overflow: hidden;
}
感觉干净多了。没有固定的高度，没有花哨的东西，咱们的手风琴作用仍然按预期作业。好极了！
这个处理计划的一个警告是需求设置一个overflow: hidden到.accordion-body的内部div，以便使这个计划正常作业。在我看来这一点额外的CSS是完全值得的，你能够在谈论中说出你对它的看法！
额外提示
这个技巧之所以有效，是因为grid-template-rows的可动性，这是一些浏览器最近才有的功能。在我写这篇文章的时候，所有主流的浏览器都支撑这个特性，但是假如你想在生产代码中运用这个特性，必定要先查看兼容性！
看完本文假如觉得有用，记住点个赞支撑，保藏起来说不定哪天就用上啦～
专注前端开发，分享前端相关技能干货，大众号：南城大前端（ID: nanchengfe）
