ioni c 4 - как оживить переключение div

Question

Я отображаю div условно

HTML

<div class="page_filters" [hidden]="!show_filters">
  my content
</div>

Файл TS

show_filters = false;

toggleFilters(){
  this.show_filters = !this.show_filters;
}

Это работает хорошо, поэтому я сейчас пытаюсь сделать анимацию скользящей.

Возможно ли это?

Answer 1

Добавьте класс в div содержимого вместо *ngIf, например

[class.opened]="show"

, затем примените переход к этому классу

.opened {
    max-height: 500px;
    transition: ease-in-out 600ms max-height;
}

Посмотрите рабочий пример здесь. https://stackblitz.com/edit/minimum-angular-code-for-a-transition