(译)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结构:

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

相关推荐
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
拾光拾趣录2 小时前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
Codebee2 小时前
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
css·人工智能·算法
zhanshuo3 小时前
i18next + 原生JS 双引擎:打造前端多语言系统最佳实践
前端·javascript·css
十盒半价3 小时前
前端性能优化避坑指南:从回流重绘到页面渲染全解析
前端·css·trae
青皮桔16 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺16 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
牧杉-惊蛰19 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
哎呦你好20 小时前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
islandzzzz21 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html