Как использовать css переходы с angularjs ng-show?

Question

Я пытаюсь добавить замедляющую анимацию с помощью angularjs ng-show, но я не могу понять, как ее вызвать. Я хочу, чтобы анимация была простым облегчением раскрытия div (а не непрозрачности или исчезновения), поэтому, когда div показывает - он медленно расширяется - очень похоже на боковые меню и навигационные панели.

var app = angular.module('myApp', []);

app.controller('Ctrl', ['$scope', function($scope) {
  $scope.isShowBox1 = false;
  $scope.isShowBox2 = false;
  $scope.isShowBox3 = false;

}]);

.box-header{
  width:100%;
  padding:5px;
  background-color:tomato;
  cursor:pointer;
  border-bottom:1px solid gray;
}
.box-body{
   width:100%;
  padding:5px;
  background-color:#e2e2e2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
<div ng-app="myApp">
  <div class="container" ng-controller="Ctrl">
    <div class="box">
      <div class="box-header" ng-click="isShowBox1 = !isShowBox1">
        Box 1
      </div>
      <div class="box-body" ng-show="isShowBox1">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </div>
    
     <div class="box-header" ng-click="isShowBox2 = !isShowBox2">
        Box 2
      </div>
      <div class="box-body" ng-show="isShowBox2">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </div>
   
     <div class="box-header" ng-click="isShowBox3 = !isShowBox3">
        Box 3
      </div>
      <div class="box-body" ng-show="isShowBox3">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </div>
   

  </div>
</div>

Answer 1

Пожалуйста, поместите этот CSS в вашем стиле.

var app = angular.module('myApp', []);

app.controller('Ctrl', ['$scope', function($scope) {
  $scope.isShowBox1 = false;
  $scope.isShowBox2 = false;
  $scope.isShowBox3 = false;

}]);

.box-header{
  width:100%;
  padding:5px;
  background-color:tomato;
  cursor:pointer;
  border-bottom:1px solid gray;
}
.box-body{
  width:100%;
  padding:5px;
  background-color:#e2e2e2;
  transition: all 0.3s linear;
  overflow: hidden;
}
.ng-hide:not(.ng-hide-animate) {
    display: block !important;
    height: 0;
    padding: 0;
    visibility: hidden;
    opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
<div ng-app="myApp">
  <div class="container" ng-controller="Ctrl">
    <div class="box">
      <div class="box-header" ng-click="isShowBox1 = !isShowBox1">
        Box 1
      </div>
      <div class="box-body" ng-show="isShowBox1">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </div>
    
     <div class="box-header" ng-click="isShowBox2 = !isShowBox2">
        Box 2
      </div>
      <div class="box-body" ng-show="isShowBox2">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </div>
   
     <div class="box-header" ng-click="isShowBox3 = !isShowBox3">
        Box 3
      </div>
      <div class="box-body" ng-show="isShowBox3">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </div>
   

  </div>
</div>