当height高度不确定或者为auto的时候，可以使用grid trick做过渡动画 
效果 

代码 
.grid {
  display: grid; /* 1 */
  grid-template-rows: 0fr; /* 2 */
  transition: grid-template-rows 0.5s ease-in-out; /* 3 */
}

.grid.open {
  grid-template-rows: 1fr; /* 5 */
}

.grid-inner {
  overflow: hidden; /* 4 */
}

最新的css属性calc-size也可以完成相同效果