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?

what do you mean by "disable transition animation", could you elaborate more? — terahertz, Apr 24 '21 at 05:44
I want the sidenav to close instantly instead of taking 400ms to slide away like how it currently does — Andi Qu, Apr 25 '21 at 06:35

Ivan Tsai · Accepted Answer · 2021-05-14T21:57:27.920

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

Thank you so much! This is exactly what I was looking for :) — Andi Qu, Apr 27 '21 at 11:31

score 2 · Answer 2 · answered Apr 21 '21 at 18:57

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

answered Apr 21 '21 at 18:57

Transformer

6,963
2
26
52

1

Neither of these work for me. The first one disables all animations on the website while I only want to disable the transition animation, and the second one just doesn't do anything – Andi Qu Apr 21 '21 at 20:21

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

2 Answers2