Angular 材质 - 禁用 mat-sidenav 过渡 animation 但保留儿童动画？

Question

我有一个 Angular 应用程序，它的mat-sidenav结构如下：

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

我想为mat-sidenav禁用过渡 animation 但保留 sidenav 内容的动画（例如mat-vertical-stepper ）。 但是，我还没有找到一种方法来做到这一点。

到目前为止，我发现了这个类似的 GitHub 问题，但那里描述的修复似乎也禁用了 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 过渡 animation，但也会禁用所有其他动画。 以下似乎也不起作用：

<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>

我还在Angular 的文档中找到了这篇文章，但它看起来非常复杂，我无法弄清楚如何将它应用于没有自定义动画的组件（如mat-vertical-stepper ）。

有没有什么简单的方法可以禁用mat-sidenav的转换 animation 同时仍保留其子动画？

Answer 1

这是一种解决方法。 暂时禁用它。

演示

在 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>

in.ts 文件：

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

Answer 2

using Angular module `NoopAnimationsModule` 

1 从'@angular/platform-browser/animations'导入导入{NoopAnimationsModule}；

2 确保将其添加到 NgModule

@NgModule({      
  imports: [NoopAnimationsModule]...      
})
export class YourMaterialModule { }

要删除某些特定组件上的动画/过渡，您也可以通过 CSS 像这样

.mat-sidenav{ transition: none; }

看看这个disableRipple或这个答案