CSS技巧:如何实现高度从0到auto的过渡动画
发表时间: 2024-03-22 17:29
当我们使用CSS来对一个高度未定的元素添加折叠动画时,会遇到使用transition来对Height从0到auto添加过度动画,动画并没有生效的问题;
幸运的是,现在有了解决方案: 使用表格布局,实现简单并且效果完美;
通常以前对于这种场景,使用CSS来实现:使用max-height 或者 scaleY 貌似能够解决;但是会有不同程度的问题:
折叠时设置max-height为零,展开时设置max-height为一个较大的值;
弊端: 因为需要尽可能保证max-height大于折叠内容的宽度,需要将max-height设置的比较大,导致展开时动画速度变慢,并且折叠时有短暂的停顿;
通过scaleY 0 - 1的过渡实现,但是动画过程中可见内容被挤压变形,体验不好;
现在如果用网格布局来实现,让我们来试下:
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;}
效果:
原文链接:
https://dev.to/francescovetere/css-trick-transition-from-height-0-to-auto-21de