使用 ngClass 动画更改类状态答案

【问题标题】：Animating change class state using ngClass使用 ngClass 动画更改类状态
【发布时间】：2019-09-23 18:05:24
【问题描述】：

我有一个材质侧导航，一开始是打开的，通过单击菜单项它会扩展。我通过使用 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 个州：

有什么方法可以让它们动画从打开状态变为展开状态？

【问题讨论】：

可能使用ViewChild() 并使用js 制作动画。
@VahidNajafi 谢谢，我是用 css 动画制作的。
嗨@FatemeFazli 我正在努力达到你的确切结果，你找到解决方案了吗？

标签： angular angular-material css-animations

【解决方案1】：

sidenav 类中添加“transition: all 0.3s”。

【讨论】：

这可以是评论，或者详细说明有助于理解的此类属性的上下文。

【解决方案2】：

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

【讨论】：

谢谢，但我不想使用 mat-expansion-panel。