collapse / expand animation in Angular

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>