CSSトランジションのみ有効でないul

Question

私はこのウェブサイトから純粋なCSSナビゲーションバーを作った。

http://blog.christopherianmurphy.com/2016/01/responsive-pure-css-menu.html

ここで、粗バージョンを参照してください。これは、1つの詳細から離れて正常に動作

http://codepen.io/spinnaay/pen/ZOVNwg

（ちょうどことを無視し、がらくたに見えます）。

「モバイルモード」でドロップダウンメニューが遷移しない場合は、テキストのみが表示されます。基本的には、ulはtransistioningではありませんが、liはです。

あなたは動作しますが、メニューが長すぎる

nav #menu-toggle:checked ~ ul { 
    height:100vh; 
} 

に

nav #menu-toggle:checked ~ ul { 
    height:100%; 
} 

を変更した場合。

これは私にとっては奇妙な問題ですが、確かに簡単な答えがあります。

ありがとうございます！

Answer 1

• 高さ：100vh - >ビューポートの高さの100％を意味します。 （ブラウザウィンドウ）
• 高さ：100％ - >親の高さの100％を意味します。

私の理解では、高さのパーセンテージでトランジションを使用することはできません。しかし、min-heightプロパティにトランジションを使用することができます。

あなたのコードに次を追加しよう：

nav #menu-toggle:checked ~ ul { 
    min-height:0; 
    transition: min-height .2s ease-in-out; 
} 

nav #menu-toggle:checked ~ ul { 
    min-height:900px; // number higher then the total size of the children 
}