css动画显示隐藏div

css动画实现过渡效果，展示/隐藏div

背景： transition高度不固定的情况下，控制高度height: auto失效，解决方案如下：

• 先将需要做动画的元素设置 max-height: 0px，overflow: hidden;
• 在事件中给元素添加 max-height: 固定高度（>= 元素的实际高度）
  案例1：

  .test {
    transition: max-height 2s;
    max-height: 10px;
    overflow: hidden;
    background: cyan;
  }

<div class="test">测试测试测试高度不固定的情况下，动画过渡效果</div>

案例2：

.bottom-info {
  color: #999;
  font-size: .11rem;
  line-height: .17rem;
  /** transition: max-height 1s linear;
   transition: opacity 1s linear; **/
  transition: all 0.4s ease-in-out;
}
/** 滑动显示、隐藏动画效果 **/
.info-show {
  padding-bottom: .1rem;
  max-height: 1.5rem;
  opacity: 1;
}
.info-hide {
  padding-bottom: 0;
  max-height: 0;
  opacity: 0;
}