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 plicated and I can't figure out how to apply it to ponents 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?

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 plicated and I can't figure out how to apply it to ponents 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?

• javascript
• css
• angular
• angular-material

• what do you mean by "disable transition animation", could you elaborate more? – terahertz Commented Apr 24, 2021 at 5:44
• I want the sidenav to close instantly instead of taking 400ms to slide away like how it currently does – Andi Qu Commented Apr 25, 2021 at 6:35

2 Answers 2

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);
}

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 ponents you can also do it via CSS like this

.mat-sidenav{ transition: none; }

Check out this for disableRipple or this answer