（译）CSS实现高度从0到auto的过度动画

当咱们运用CSS来对一个高度未定的元素增加折叠动画时，会遇到运用transition来对Height从0到auto增加过度动画，动画并没有生效的问题；

走运的是，现在有了处理方案： 运用表格布局，完成简略而且作用完美；

通常以前对于这种场景，运用CSS来完成：运用max-height 或者 scaleY 貌似可以处理；可是会有不同程度的问题：

max-height:

折叠时设置max-height为零，打开时设置max-height为一个较大的值；

弊端： 由于需要尽可能确保max-height大于折叠内容的宽度，需要将max-height设置的比较大，导致打开时动画速度变慢，而且折叠时有时间短的停顿；

scaleY

经过scaleY 0 – 1的过渡完成，可是动画过程中可见内容被揉捏变形，体会欠好；

现在假如用网格布局来完成，让咱们来试下：

grid-template-rows

html结构：

<div class="accordion">
  <div class="accordion-title">Hover me!</div>
  <div class="accordion-body">
    <div>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
</div>

.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;
}

作用：

原文链接：

dev.to/francescove…