Angular-Animate mit Höhe: auto; funktioniert nicht

Question

Ich möchte Animation mit eckigen animieren. Meine CSS-Regeln sind:

.expanded { 
    transition: all ease 0.5s; 
    overflow: hidden; 
} 
.expanded.ng-hide { 
    height: 0px; 
} 

Wenn ich hinzufügen, zum Beispiel height: 100px-.expanded Klasse, dann funktioniert alles einwandfrei. Aber wie funktioniert es ohne height Definition? Ich brauche das, weil der Inhalt von .expanded Container anders sein könnte.

Answer 1

Es ist nicht möglich, die Höhe in CSS auf 'auto' zu bringen (weder in angularJS). Sie können stattdessen versuchen, mit maximaler Höhe zu spielen. Es gibt einige Auswirkungen davon, aber zumindest können Sie es versuchen. Animiere also nicht Höhe von 0 bis Auto, sondern Max-Höhe. Sie können maximale Höhe viel größer als die Höhe, die Sie benötigen, und das würde funktionieren.

#container { 
 
    max-height: 0; 
 
    height: 100px; 
 
    background: red; 
 
    transition: max-height .3s ease-in; 
 
} 
 

 
#container:hover { 
 
    max-height: 500px; 
 
}

<div id="container"> 
 
    Hover me 
 
</div>

Answer 2

Post kirill.buga mir so geholfen nach dem Lesen dieser Post und einige andere, die ich habe einige Änderungen an kirill.buga der Post. Ich habe die Container-Höhe losgeworden, weil sie automatisch sein sollte, verlangsamte den Übergang und versteckte dann den Überlauf, so dass der Inhalt innerhalb des Div nicht mehr sichtbar war, wenn das Div-Element kollabierte.

#container { 
    max-height: 20px; 
    background: red; 
    overflow:hidden; 
    transition: max-height 2s ease-in; 
} 

#container:hover { 
    max-height: 800px; 
} 

plunker example