纯css实现元素平滑展开与收起

HTML部分：

      <input id="check" type="checkbox" style="display: none" />

      <div class="box">要收起展开的盒子</div>

      <div class="up-or-down">

        <label for="check" class="check-in">
            <img src="@/assets/imgs/upDownRaw.png" alt="这是一个上下箭头图标" class="raw"/>            
        </label>

      </div>
       
CSS部分：
      
      .check-in {
            display: block;
      .raw {
            height: 1em;
            //图标默认向上
            transform: rotate(180deg);
            transition: all 0.5s;}
      }

      //收起
      #check:checked ~ .box {
          max-height: 0;
          transform: translate(1.1);}

      //旋转图标
      #check:checked ~ .up-or-down .raw {
          transform: rotate(360deg);}

    .box {
          //盒子默认展开
          max-height: 70px;
          overflow: hidden;
          transition: max-height 0.5s;
    }

 

参考《CSS世界》