Угловой: одушевленный контейнер с детьми

Question

Я занимаюсь разработкой приложения Angular 8, и у меня есть контейнер панели, который содержит цикл for, который создает множество дочерних элементов div.В заголовке панели есть кнопка для отображения и скрытия тела панели, и я бы хотел, чтобы анимация была между двумя состояниями.Кажется, анимация работает на родителя, но дети не анимированы и просто появляются и исчезают одновременно.Например, когда панель закрывается, я вижу, что она закрывается за внутренними видами, а внутренние виды просто исчезают сразу, когда родительская панель достигает конца анимации.Как я могу заставить анимацию работать на обоих вместе?

Вот так я настроил анимацию.

В моем файле ts у меня есть настройки для анимации.

animations: [
    trigger('collapse_animation', [
      transition(':enter', [
        animate('1s ease-in', style({
        height   : '*',
        padding  : '10px',
      })) ]),
      transition(':leave', [
        animate('1s ease-in', style({
        height  : '0px',
        margin  : '0px',
        padding : '0px'
      }))
    ])
  ]),
  ]

И в моем шаблоне у меня есть

<div class="panel panel-default">
    <div class="panel-heading" (click)="toggleFields()"> Some title </div>
    <div class="panel-body insert-remove-container" @collapse_animation *ngIf="showFields">
        <div class='container'>
            <div class='row col-12' *ngFor="let field of fields">
                <app-field></app-field>
            </div>
        </div>
    </div>
</div>

Наконец, toggleFields() - это функция, которая изменяет значение showFields.