Sass CSS3 - 如何在沒有JavaScript的情況下動畫內容SlideDown和SlideUp

Question

嗨如何製作HTML DIV，內容只用CSS3/SASS展開和摺疊？

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; 
     } 
    } 
    }