Sass CSS3 - 如何在没有 JavaScript 的情况下为内容 SlideDown 和 SlideUp 设置动画

Question

您好，如何仅使用 CSS3/SASS 制作内容展开和折叠的 HTML DIV？

Answer 1

这行得通：

HTML：

  <div class="dropdown">
    <h5>Some data</h5>
    <ion-icon name="ios-arrow-forward-outline"></ion-icon>
  </div>
  <input type="checkbox" id="techdata-input"/>
  <label for="techdata-input">
    <div  class="content_container">
      <div class="empty"></div>
      <div class="mcontent">
        <p>hei</p>
        <p>hei</p>
        <p>hei</p>
        <p>hei</p>
      </div>
    </div>
  </label>

CSS3/SASS：

.dropdown{
    height: 45px;
    width: 100%;
    overflow: hidden;
    background: white;
    padding: 13px 0px 0px 21px;

    h5{
      display: inline-block;
    }
    ion-icon{
      display: inline-block;
      font-size: 1.5em;
      color: $color-blue;
      position: relative;
      float: right;
      padding-right: 20px;
      top: -1px;
    }
  }
  #techdata-input {
    display: none;
    /* Hide the input */

    &:checked + label .content_container {
      width: 100%;
      visibility: visible;
      position: relative;
      top: -45px;
      background-color: transparent;
      div{
        visibility: visible;
      }
      .empty{
        height: 40px;
        background-color: transparent;
      }
      .mcontent{
        background-color: white;
      }

      overflow: hidden;
      max-height: 500px;
      transition: max-height 0.3s ease-in;

    }
    &:not(:checked) + label .content_container {
      width: 100%;
      background-color: transparent;
      overflow: hidden;
      position: relative;
      top: -45px;

      .empty{
        height: 39px;
      }

      overflow: hidden;
      max-height: 40px;
      transition: max-height 0.3s ease-out;

      .mcontent{
        background-color: white;
        padding-top: 1px;
      }
    }
  }