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

蓝思绪2024-03-22 17:38

当我们使用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结构：

html 复制代码

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

css 复制代码

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