javascript - Angular Material - 禁用 mat-sidenav 过渡动画但保留 child 动画？

Question

我有一个带有 mat-sidenav 的 Angular 应用程序结构如下:

<mat-sidenav-container>
    <mat-sidenav [mode]="'side'">
        <!-- Sidenav content -->
    </mat-sidenav>
    <mat-sidenav-content>
        <!-- Main content -->
    </mat-sidenav-content>
</mat-sidenav-container>

我想禁用 mat-sidenav 的过渡动画但保留 sidenav 内容的动画(例如 mat-vertical-stepper )。但是，我一直无法找到一种方法来做到这一点。
到目前为止，我已经找到了 this similar GitHub issue ，但那里描述的修复似乎也禁用了 sidenav 内容的动画。例如，我尝试了以下方法:

<mat-sidenav-container [@.disabled]="true">
    <mat-sidenav [mode]="'side'">
        <!-- Sidenav content -->
    </mat-sidenav>
    <mat-sidenav-content>
        <!-- Main content -->
    </mat-sidenav-content>
</mat-sidenav-container>

这会禁用 sidenav 过渡动画，但也会禁用所有其他动画。以下似乎也不起作用:

<mat-sidenav-container [@.disabled]="true">
    <mat-sidenav [mode]="'side'" [@.disabled]="false">
        <!-- Sidenav content -->
    </mat-sidenav>
    <mat-sidenav-content [@.disabled]="false">
        <!-- Main content -->
    </mat-sidenav-content>
</mat-sidenav-container>

我还找到了 this article in Angular's documentation ，但它看起来非常复杂，我无法弄清楚如何将它应用于没有自定义动画的组件(如 mat-vertical-stepper )。
有什么简单的方法可以禁用 mat-sidenav的过渡动画同时仍保留其子动画？

Answer 1

这是一种解决方法。
暂时禁用它。
Demo
在 HTML 中:

<mat-sidenav-container [@.disabled]="temporaryDisabled">
  <mat-sidenav [mode]="'side'" #sidenav> 
    Sidenav content
  </mat-sidenav>
  <mat-sidenav-content>
    <div class="header">
      <button mat-stroke-button (click)="toggle()">toggle sidenav</button>
    </div>
    <div class="stepper">
      <mat-vertical-stepper [linear]="isLinear" #stepper >
        (... stepper codes ...)
      </mat-vertical-stepper>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

在 .ts 文件中:

temporaryDisabled: boolean = false;
toggle(){
  this.temporaryDisabled = true;
  this.sidenav.toggle();
  setTimeout(()=>{
    this.temporaryDisabled = false;
  },10);
}