遷移時間を設定するときに望ましくないCSS遅延が発生する

Question

メニューを開くのと同じ時間内に閉じるようにします。何らかの理由で、閉鎖前に遅れがあり、余分なスペースがあることがわかります。どこから来たのか分かりません。ここで

はjsfiddleです：私はの開閉をトリガするために、チェックボックス、ラベルの組み合わせを使用してい

.hide { 
    visibility: hidden; 
    overflow: hidden; 
    max-height: 0; 
} 

input[type=checkbox]:checked~.toggleable { 
    visibility: visible; 
    overflow: visible; 
    max-height: 1000px; 
} 

.toggleable { 
    transition: visibility 5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out; 
} 

：https://jsfiddle.net/m9pd8bjh/7/

ここであなたはすぐに間違った何かを見た場合のCSSのコードですメニュー。

Answer 1

を変更しました。これは、2つの状態（アニメーションを容易にするために、可視または非表示のいずれかの間に何もない状態）しかないためです。

フェードインエフェクトを作成する場合は、opacity:0;〜opacity:1;を使用し、その代わりにトランジションを使用できます。

次の注意点は、アニメーションの時間が非常に長く、max-widthをアニメーション化する場合、調整するアニメーションの時間を短縮する必要があることです。 https://jsfiddle.net/m9pd8bjh/12/

とCSS：

はフィドルを参照してください

.toggleable { 
    transition: max-height 0.25s ease-in-out; 
} 

あなたは特にその長いアニメーションの時間枠をしたい場合は、あなたは、最大の高さのソリューション以外のものを使用する必要があります。

これは、JavaScript、jQueryなどのフレームワークを使用する必要があるため、新しいアプローチになります。今後の参考のために

が、ここではjQueryを使用して同じことをやってフィドルです：https://jsfiddle.net/m9pd8bjh/15/

そしてここでjQueryのコードです：

$('.toggler').click(function(){ 
    $('.hide').slideToggle(); 
}); 

Answer 2

メニューを閉じるときに別のトランジションを追加し、ul要素の最初のマージンを削除しました。その効果はあなたのために大丈夫ですか？

CSSコードあなたが理解する必要がある最初の事はCSSでvisibilityプロパティがアニメーションすることができないということです

.hide { 
    visibility: hidden; 
    overflow: hidden; 
    max-height: 0; 
    transition: visibility 0.5s ease-in-out, overflow 0.5s ease-in-out, max-height 0.5s ease-in-out; 
} 
#menu-main { margin: 0; padding: 10px 40px } 

input[type=checkbox]:checked ~ .toggleable { 
    visibility: visible; 
    overflow: visible; 
    max-height: 1000px; 
    transition: visibility 2.5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out; 
} 

See this fiddle