max-height 实现展开收起动画效果

height 具体数字到 auto 配合 transition 一般是没有动画效果的，这次通过 max-height 来达到展开收起效果。但是这种方法有些缺点：

1. max-height 要设置一个比内容大的值；
2. transition 的动画时间是以 max-height 来计算的，其值若设置的太大，会导致动画看着很快。

<style>
.container {
 max-height: 50px;
 overflow: hidden;
 transition: max-height 0.5s;
}

/* hover 来触发动画*/
.container:hover {
 max-height: 300px;
}

.box {
 height: 300px;
 background: skyblue;
}
</style>

/*  HTML结构 */
<div class="container">
 <div class="box"></div>
</div>

预览

https://jsbin.com/bumibon/1