Currently, I am utilizing the nganimate library and have implemented an animation that affects the max-height property of a div. Here is a snippet of my code:
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>
I am interested in finding out if there is a way to dynamically set the height or max-height of the animated div based on the content inside it using only CSS.
Additionally, I have observed a slight delay when clicking the button in the demo before the div actually hides. Is there a method to make the div collapse immediately upon clicking the button?