SlideToggleアニメーションと同じCSS遷移

Question

<button>をユーザが一度移動すると、下のコードで<panel>が表示されます。これはすべて正常に動作します。しかし、<panel>のアニメーションでは満足できません。私にとって

「アコーディオン」などに<panel>スライドが、私はパネルがjQueryののslideToggleアニメーションに似た「ボトムラインを下って行く」ことでを明らかにしているアニメーションを好むだろう。

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はコンテンツを上から下にレイアウトするので、コンテンツに合わせるには高さが不十分な場合、下端が切り取られ、上端が切り取られます（後者は必要なエフェクトです）。 /あなたは単にYに沿ってそれを翻訳

1. 使用一定の高さ、およびパネルの内容

をアップ/ダウンスライドさせ、その後

使用CSS変換：

ソリューションになります（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>