CSS轉換等於SlideToggle動畫

Question

一旦用戶將鼠標懸停在<button>上方，代碼將低於<panel>。這一切工作正常。不過，我不滿足於<panel>的動畫。

對我來說，<panel>幻燈片就像一個「手風琴」，但在面板我寧願動畫由「下得去底線」，類似的一個的slideToggle動畫 jQuery的透露。

這是甚至可能與CSS如果是的話，我必須改變我的代碼，使這個動畫工作？

您也可以找到我的代碼here

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    height: 100%; 
 
} 
 

 
.button { 
 
    height: 50%; 
 
    width: 70%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: orange; 
 
} 
 

 
.button_name { 
 
    height: 20%; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: yellow; 
 
} 
 

 
.button:hover .panel { 
 
    height: 80%; 
 
} 
 

 
.panel { 
 
    width: 100%; 
 
    float: left; 
 
    overflow: hidden; 
 
    height: 0%; 
 
    transition: height 0.5s linear; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: blue; 
 
} 
 

 
.panel div { 
 
    height: 25%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: green; 
 
}

<div class="button"> 
 

 
    <div class="button_name">Menu</div> 
 
    <div class="panel"> 
 
    <div> 1.0 Menu </div> 
 
    <div> 2.0 Menu </div> 
 
    <div> 3.0 Menu </div> 
 
    <div> 4.0 Menu </div> 
 
    </div> 
 

 
</div>

Answer 1

這是相當簡單：通過改變高度，你是導致各個菜單項的高度崩潰。由於CSS從上到下排列，這意味着當高度不足以適應內容時，底部將被切斷而不是頂部（後者是您想要的效果）。

一個解決方案將是：

1. 使用恆定的高度，然後
2. 使用CSS變換，向上/向下滑動面板內容

您只需沿y它翻譯/縱軸由其自身高度（transform: translateY('-100%')）開始，並在懸停時將該值更改爲0%：

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    height: 100%; 
 
} 
 

 
.button { 
 
    height: 50%; 
 
    width: 70%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: orange; 
 
    
 
    /* Hide panel content that are translated out of parent bounding box */ 
 
    overflow: hidden; 
 
} 
 

 
.button_name { 
 
    height: 20%; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: yellow; 
 
    
 
    /* Set position to relative so it stays above panel content */ 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.button:hover .panel { 
 
    /* Slide the panel down */ 
 
    transform: translateY(0%); 
 
} 
 

 
.panel { 
 
    width: 100%; 
 
    float: left; 
 
    overflow: hidden; 
 
    height: 80%; 
 
    transition: all 0.5s linear; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: blue; 
 
    
 
    /* Slide the panel up */ 
 
    transform: translateY(-100%); 
 
} 
 

 
.panel div { 
 
    height: 25%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: green; 
 
}

<div class="button"> 
 

 
    <div class="button_name">Menu</div> 
 
    <div class="panel"> 
 
    <div> 1.0 Menu </div> 
 
    <div> 2.0 Menu </div> 
 
    <div> 3.0 Menu </div> 
 
    <div> 4.0 Menu </div> 
 
    </div> 
 

 
</div>