使用ngClass动画更改类状态

Question

我有一个重要的辅助工具，首先打开该工具，然后单击菜单项将其扩展。我通过使用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

使用过的mat-expansion-panel "opens" with angular enter-leave animations, although current state is closed.

Answer 2

在sidenav类中添加“过渡：全部0.3s”。