Анимация изменения состояния класса с помощью ngClass

Question

У меня есть материал sidenav, который сначала открывается, и при нажатии на пункт меню он становится расширенным.Я делаю это с помощью 2 классов и использую ngClass для перемещения между расширенным и нерасширенным классом:

HTML :

<mat-sidenav-container class="sidenav-container" hasBackdrop="false">
  <mat-sidenav #sidenav class="sidenav" mode="over" opened="true">
    <mat-list-item (click)="isExpanded = !isExpanded">
      <div [ngClass]="{'list-item-expanded': isExpanded , 'list-item': !isExpanded}">
        <div class="icon-container">
          <i class="icon-hamberger-menu"></i>
        </div>
        <div class="title-container">{{'menu.menu'| translate }}</div>
      </div>
    </mat-list-item>
    <mat-list-item>
      <div [ngClass]="{'list-item-expanded': isExpanded , 'list-item': !isExpanded}">
        <div class="icon-container">
          <i class="icon-dashboard"></i>
        </div>
        <div class="title-container">{{'menu.dashboard'| translate }}</div>
      </div>
    </mat-list-item>
  </mat-sidenav>
  <div class="page-content">
    <router-outlet></router-outlet>
  </div>
</mat-sidenav-container>

2 моих класса scss:

.sidenav {
    .list-item {
      cursor: pointer;
      display: flex;
      min-width: 64px;
      height: 64px;
      justify-content: center;
      flex-direction: column;
      text-align: center;
    }
    .list-item-expanded {
      cursor: pointer;
      min-width: 200px;
      height: 64px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 0px 15px 0px 15px;
    }
  }

2 состояния :

Есть ли способ сделать их оживляющими из открытого состояния в расширенное состояние?

Answer 1

Добавить "переход: все 0.3 с" в классе sidenav.

Answer 2

используется mat-expansion-panel "opens" with angular enter-leave animations, although current state is closed.