Unerwünschte CSS Verzögerung beim Übergang Dauer

Question

Einstellung mag ich das Menü in der gleichen Dauer schließen es dauert es zu öffnen. Aus irgendeinem Grund gibt es eine Verzögerung vor dem Schließen, zusammen mit etwas mehr Platz, ich habe keine Ahnung, woher es kommt. Hier

ist die jsfiddle: https://jsfiddle.net/m9pd8bjh/7/

Hier ist die CSS-Code, falls Sie etwas falsch sehen sofort:

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

Ich verwende eine Checkbox-Label-Kombination das Öffnen und Schließen des auszulösen Speisekarte.

Answer 1

Das erste, was Sie verstehen müssen, ist, dass die visibility Eigenschaft in CSS kann nicht animiert werden. Dies liegt daran, dass es nur zwei Zustände hat (entweder sichtbar oder versteckt, nichts dazwischen, um die Animation zu erleichtern).

Wenn Sie einen Fade-In-Effekt erstellen möchten, können Sie opacity:0; zu opacity:1; verwenden und stattdessen einen Übergang angeben.

Die nächste Sache zu beachten ist, dass Ihre Animationszeit sehr lang ist, und wenn Sie eine max-width animieren, müssen Sie die Animationszeit verkürzen, um anzupassen.

Siehe Geige: https://jsfiddle.net/m9pd8bjh/12/

und CSS:

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

Wenn Sie speziell möchten, dass lange Animation Zeitraum, dann werden Sie etwas anderes als eine max-height-Lösung verwenden.

Dies würde dann zu einem neuen Weg zu nähern, wie Sie JavaScript, jQuery oder eine andere solche Framework verwenden müssten.

Für die Zukunft, hier eine Geige ist jQuery das gleiche zu tun mit: https://jsfiddle.net/m9pd8bjh/15/

Und hier ist der jQuery-Code:

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

Answer 2

füge ich einen weiteren Übergang, wenn Sie das Menü zu schließen, und ich nahm die anfängliche Marge des ul Element. Ist das für dich ok?

CSS-Code geändert

.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