当咱们运用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…

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。