Max-Höhe-Übergang funktioniert nicht und funktioniert langsam

Question

Ich habe Probleme beim Animieren eines div erweitern. Meine JQuery-Funktion tut was sie soll, aber die Animation wird nicht angezeigt. Ich habe sowohl transition : all und transition : max-height versucht, aber keine scheint zu funktionieren. Auch etwas sehr Seltsames passiert, wenn ich mein div wieder verstecken möchte. Es scheint, dass es eine Art Verzögerung gibt, bevor es verschwindet. Diese Verzögerung entspricht der Zeit der Animation, aber ich kann nicht herausfinden, was falsch ist. Bitte helfen Sie.

Hier ist eine Geige: https://jsfiddle.net/vbqc2c27/1/

Answer 1

Sie können nicht von einem bestimmten Wert (0px) auf einen relativen Wert (100%) animieren. Sie müssen bestimmte Werte verwenden:

Updated fiddle

$("p").on("click",function() { 
    if($("#test").css("max-height") == "0px") { 
    $("#test").css("max-height","100px"); 
    } 
    else { 
    $("#test").css("max-height","0px"); 
    } 
}); 

Change "100%" auf "100px" und es funktioniert gut.

Natürlich ist für diese Absätze 100px nicht hoch genug (der Text ist abgeschnitten). Daher müssen Sie möglicherweise eine Funktion hinzufügen, um die automatische Höhe in Pixeln zu berechnen.

Answer 2

Oder können Sie slideToggle() Funktion verwenden, die viel einfachere als das ist :)

See this fiddle

JS

$("p").on("click",function() { 
    $("#test").slideToggle(); 
}); 

CSS

div { 
    display: none; 
} 

Answer 3

Updated fiddle - einfache Lösung ohne Verzögerung

Fix Verzögerungs Lösung:

Setzen kubische Bezier-(0, 1, 0, 1) Übergangsfunktion für das Element.

.text { 
    overflow: hidden; 
    max-height: 0; 
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); 
    &.full { 
    max-height: 1000px; 
    transition: max-height 1s ease-in-out; 
}