css展开与收缩动画

改变高度，利用transition过渡效果。

      .box {
        width: 300px;
        height: 20px;
        transition: height 0.3s;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.05);
      }
      .box:hover {
        height: 300px;
      }

      <div class="box">
        君不见黄河之水天上来，奔流到海不复回。
        君不见高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。
        天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。
        岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。
        钟鼓馔玉不足贵，但愿长醉不愿醒。 古来圣贤皆寂寞，惟有饮者留其名。
        陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。
        五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
      div>

效果如图

在日常开发中，我们往往需要从后台获取数据，此时我们不知道数据占据具体高度，也就是展开后的高度，此时将height设置为auto

      .box {
        width: 300px;
        height: 20px;
        transition: height 0.3s;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.05);
      }
      .box:hover {
        height: auto;
      }

此时过渡效果transition失去了作用

解决方法，用max-height。

注意：这个高度尽可能比实际高度大一些，太大会导致动画过渡时间不匹配，太小会导致内容展示不完整。

      .box {
        width: 300px;
        max-height: 20px;
        transition: max-height 0.3s;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.05);
      }
      .box:hover {
        max-height: 600px; 
      }