CSS未知高度元素过渡展开

Posted on Edited on

介绍

CSS Grid（网格布局）是一种用于网页布局的二维布局系统，使得开发者可以更简单、更直观地创建复杂的布局结构。
与其他布局模型（如块级元素、内联元素、表格和Flexbox）不同，CSS Grid 是专门设计用来处理二维布局的：
也就是说，你可以同时控制一个项目（item）的行（row）和列（column）。

基本术语

实现方式

主要利用了网格轨道的 fr 相对单位，从 0fr 过渡到 1fr，网格元素默认要设置 min-height: 0,且不能有 padding 这些属性否则默认会被撑高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.tips {
  display: grid;
  grid-template-rows: 0fr;
  background: #DDD;
  transition: all .2s ease;
  overflow: hidden;
  box-sizing: border-box;
}
.content {
  min-height: 0;
}
.inner {
  padding: 10px;
}

.btn:hover + .tips {
  grid-template-rows: 1fr;
}

1
2
3
4
5
6
<button class="btn">展开</button>
<div class="tips">
  <div class="content">
    <p class="inner">我是一段非常长的文本我是一段非常长的文本我是一段非常长的文本我是一段非常长的文本我是一段非常长的文本我是一段非常长的文本我是一段非常长的文本我是一段非常长的文本</p>
  </div>
</div>

See the Pen Untitled by camo (@camoth-the-styleful) on CodePen.