(译)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...

相关推荐
Demoncode_y5 小时前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
CoderYanger10 小时前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
软件技术NINI10 小时前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI11 小时前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
金梦人生13 小时前
Css性能优化
前端·css
写代码的皮筏艇13 小时前
CSS属性继承与特殊值
前端·css
我有一棵树13 小时前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
Light601 天前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
速易达网络1 天前
Vue3 原生移动应用开发来了
前端·javascript·css
用户458203153171 天前
CSS 层叠层 (@layer) 详解:控制样式优先级新方式
前端·css