transition height 从 0 到 auto 无效应对方法

[ChuChencheng]

背景

如下 CSS 要实现一个容器从高度 0 正常展开到 auto（或反之）是无效的

<div>
contents
</div>

div {
  transition: height .2s;
}

div.active {
  height: 0;
}

解决

使用 grid 布局，把 transition 属性设置为 grid-template-rows，并从 0fr 变化到 1fr 可解决，但需要多套一层 div

<div class="wrapper">
  <div class="inner">
    contents
  </div>
</div>

.wrapper {
  display: grid;
  transition: grid-template-rows .2s;
  grid-template-rows: 0fr;
}

.wrapper.active {
  grid-template-rows: 1fr;
}

.inner {
  overflow: hidden;
}

References

• Transitioning to Height Auto (Two Ways)