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