collapse / expand animation in Angular - css

Question

I have some code like this
<div ng-click="showMore = true">show more</div>
<div class="show-more' ng-show="showMore">
<div class="cell">
//some span
</div>
<div class="cell">
//some div
</div>
<div ng-click="showMore = false">show less</div>
</div>
and when user clicks 'show more', I want to show the rest in animation
in my css
.cell {
padding-top: 20px;
padding-bottom: 15px;
height: 110px;
}
I have to get rid of ng-show or ng-hide, because display:block or display:none would not make transition: height 0.5s linear; work. So I tried to set the height of .cell to be 0 when it is collapsed, and set it as 110px when it is expanded, but cell height is not really 0 when it is collapsed, because it contains <span> or <div> which have height and padding
how to animate the expand/collapse process in my case? thanks in advance

Answer 1

var app = angular.module("myApp", []);
// Create a Controller named "myCtrl"
app.controller("myCtrl", function($scope) {
showMore = false;
});
.show-more {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
max-height: 0;
}
.show-more.show {
max-height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="show-more" ng-class="{'show': showMore}">
<div class="cell">
//some span
</div>
<div class="cell">
//some div
</div>
</div>
<button type="button" ng-click="showMore = !showMore">
Show {{ showMore ? 'Less' : 'More' }} ...
</button>
</div>

Answer 2

Why you trying this in scripting way? Why don't you use Bootstrap Collapse class, Its all going to come with inbuilt Animations