Animieren Höhe auf einem div mit einer unterschiedlichen Anzahl von untergeordneten Elementen

Question

ich nganimate bin mit und habe eine Animation an ihrem Platz auf der max-height Eigenschaft eines div in etwa so:

css

.sublist.ng-hide { 
    max-height: 0; 
} 

.sublist { 
    max-height: 1300px; 
    overflow: hidden; 
    -webkit-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1) all; 
    -moz-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1) all; 
    transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1) all; 
} 

html

<button ng-click="toggle=!toggle">{{toggle ? 'Hide' : 'Show'}} Items</button> 
<div style="background-color:#fff; border: 1px black solid;" ng-show="toggle" class="sublist"> 
    <ul> 
    <li ng-repeat="name in names"> 
     <a href="#"> {{name}} </a> 
    </li> 
    </ul> 
</div> 

Working demo

Ich würde gerne wissen, ob es eine Möglichkeit gibt, die height \ max-height basierend auf der Höhe der untergeordneten Elemente in der div zu setzen, mit der ich allein css animiere?

Auch ich merke, es gibt eine Verzögerung, wenn Sie auf die Schaltfläche in der Demo klicken, bevor das div versteckt. Ist es möglich, das div zusammenzubrechen, sobald die Schaltfläche geklickt wird?

Answer 1

Ich habe Ihre Demo versucht. Durch die Einstellung von Max-Höhe funktioniert Auto wie ein Zauber.

Siehe unten: https://plnkr.co/edit/dJLre1RYNRPafikxcuD3?p=preview

.sublist { 
    max-height: auto; 
    overflow: hidden; 
    -webkit-transition: 0.5s ease-in all; 
    -moz-transition: 0.5s ease-in all; 
    transition: 0.5s ease-in all; 
}