css - Angular 中的折叠/展开动画

Question

我有这样的代码

<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>

当用户点击“显示更多”时，我想用动画显示其余部分

在我的 CSS 中

.cell {
    padding-top: 20px;
    padding-bottom: 15px;
    height: 110px;
}

我必须摆脱 ng-show或 ng-hide ，因为 display:block或 display:none不会使transition: height 0.5s linear;工作。所以我尝试设置 .cell 的高度折叠时为0，展开时设置为110px，但折叠时单元格高度并不是真正的0，因为它包含<span>或 <div>具有高度和填充

在我的案例中，如何为展开/折叠过程设置动画？提前致谢

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>