过渡动画相关

石怜安小于 1 分钟

高度过渡

当想实现一个 height:0 到 auto 的平滑过渡，一般有以下几种思路：

使用 transition: 500ms height ease;，但是 auto 并不是一个确定的值，导致 transition 是无效的
使用 transition: 500ms max-height ease;，但是过渡动画会不准确，有延迟
使用 transform: scaleY()，但是会导致元素被压缩
使用 JavaScript 解决
使用 Grid 布局，当前最优解

演示

  <div class="transition-001-demo">
    <div class="btn">
      hover me
      <div class="detail">
        <div>
          这是文本<br>
        </div>
      </div>
    </div>
  </div>

.detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.5s;
}
.detail > div {
  overflow: hidden;
}
.btn:hover .detail {
  grid-template-rows: 1fr;
}