grid-animate

BlackBerry,•1 min read
css
Back

有一次在项目中需要做到展开折叠效果加个动画，内容是自适应的，所以不能通过设置 height 实现，可以通过 max-height 曲线救国，但是有点瑕疵的。

后来看到了浏览器支持了 grid 属性的动画效果，这看起很棒！

基于此，我们可以通过调整 grid-template-rows 来实现展开折叠的动画效果。

<div class="grid">
  <div class="grid-child"></div>
</div>
.grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-in-out;
}
.grid.open {
  grid-template-rows: 1fr;
}
.grid-child {
  overflow: hidden;
}
the first row
the second row
the third row
© BlackBerry.