Angular Material - Disable mat-sidenav transition animation but keep children animations?

Question

I have an Angular app with a mat-sidenav that's structured like this:

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

I'd like to disable the transition animation for the mat-sidenav but keep the sidenav content's animations (e.g. for a mat-vertical-stepper). However, I haven't been able to find a way to do this.

So far, I've found this similar GitHub issue, but the fixes described there seem to disable the sidenav content's animations too. For example, I've tried the following:

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

which disables the sidenav transition animation, but also disables all other animations. The following doesn't seem to work either:

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

I've also found this article in Angular's documentation, but it seems very complicated and I can't figure out how to apply it to components without custom animations (like the mat-vertical-stepper).

Is there any easy way to disable a mat-sidenav's transition animation while still keeping its children's animations?

Answer 1

This is a workaround. Temporarily disable it.

Demo

in 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 file:

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

Answer 2

using Angular module `NoopAnimationsModule` 

1 Import import {NoopAnimationsModule} from '@angular/platform-browser/animations';

2 ensure you add it to NgModule

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

To remove animation/transition on some specific components you can also do it via CSS like this

.mat-sidenav{ transition: none; }

Check out this for disableRipple or this answer