Laggy Übergang in nur einer Richtung

Question

Ich habe ein einfaches, reines CSS, Dropdown-Menü erstellt. Ich stehe vor einem seltsamen Lag-Problem. Wenn das Menü heruntergerollt wird, ist der Übergang glatt, aber in der entgegengesetzten Richtung gibt es eine Verzögerung von etwa 1 Sekunde, bevor die Animation beginnt.

HTML:

<input type="checkbox" id="switch" name="switch"> 
<label for="switch" id="switch-button">Click me!</label> 

<div id="txt"> 
<p>Menu element 1</p> 
<p>Menu element 2</p> 
<p>Menu element 3</p> 
<p>Menu element 4</p> 
</div> 

CSS:

#switch  { display: none; } 
#switch-button { display: block; } 
#txt   { max-height: 400px; } 

#switch ~ #txt { 
    transition: 1s max-height 0s; 
} 
#switch:not(:checked) ~ #txt { 
    max-height: 0px; 
    overflow: hidden; 
} 
#switch:checked ~ #txt { 
    max-height: 400px; 
} 

https://jsfiddle.net/s1237n9h/8/

Problem tritt auf in: Chrome, Firefox, Android-Browser, Rand.

Answer 1

Die Verzögerung ist auf die Tatsache zurückzuführen sind Sie von max-height: 400px zu max-height: 0 Übergang aber Ihr Behälter hat nur 72px in der Höhe.

Daher sind Sie nicht in der Lage die Animation 400px-72px, zu beobachten, aber erst nach max-height unter den tatsächlichen height Ihres Elemente animieren. Wenn Sie die height des Elements und die max-height übereinstimmen, werden Sie den Übergang vollständig beobachten, ohne visuelle Verzögerung.

Answer 2

transition-delay: -.5s; zu

#switch:not(:checked) ~ #txt { 

Ergebnis hinzufügen:

#switch:not(:checked) ~ #txt { 
     max-height: 0px; 
     overflow: hidden; 
     width: 100%; 
     -webkit-transition: 1s max-height 0s; 
     -moz-transition: 1s max-height 0s; 
     transition: 1s max-height 0s; 
    transition-delay: -.5s; 
    } 

Answer 3

Das Problem hier ist, dass Sie max-height verwenden, um zu versuchen, die Höhe des Dropdown zu steuern, so dass es nur groß ist, wie es sein muss, um die Menüelemente anzuzeigen. In diesem Fall wird als 72px gerendert. Der Browser versucht jedoch immer noch, den Übergang über die max-height von 400px durchzuführen.

Wenn das Menü geöffnet wird, sieht der Übergang nicht stockend aus, da er sofort gestartet wird. Die Zeit, die der Browser zum Abschluss des Übergangs berechnet, basiert jedoch auf max-height von 400px. Deshalb sieht der Übergang so aus, als ob er "schneller" als 1 Sekunde passiert - weil er das hohe Menü in etwa einer Viertelstunde anzeigt und dann die Höhe des Elements kappt, aber danach geht der Übergang weiter 400px. Das Umgekehrte erscheint verzögert, da der Browser tatsächlich versucht, die Pixel 400 bis 72 zu "verstecken", bevor das tatsächlich gerenderte Element verborgen wird.

Vergleichen Sie Ihre Version mit dieser unten, wo der Übergang 5 Sekunden dauert. Klicken Sie auf, um das Menü zu öffnen, und warten Sie 5 Sekunden. Dann klicken Sie, um es zu schließen. Sie werden sehen, dass der Übergang erst nach etwa 4 Sekunden beginnt. Während dieser Zeit tritt der Übergang von den Pixeln 400 bis 72 auf, und dann wird das gerenderte Element in ungefähr 1 Sekunde verborgen.

JS Fiddle with 5s transition

Wenn Sie dies tun mit reiner Höhe (nicht, was Sie wollen, da es nicht die Höhe der <div> steuern) Sie sehen alles normal zu arbeiten.

JS Fiddle with height transition

So Ihre Frage zu beantworten, ist der Übergang nicht laggy, aber nur mit max-height auf diese Weise den Übergang versucht, macht es auf diese Weise erscheinen.