How to Disable Mat-Tab Animations with Pure CSS

How to change for Angular in mat-tab-group the transition effect?

Considering your code I guess you try to fade in a new tab while fading out a previous one.

Using Eldon's answer I suggest some minor changes:

.mat-tab-body {
    animation: fade-out 0.5s;
    opacity: 0;
}
.mat-tab-body.mat-tab-body-active {
    animation: fade-in 0.5s;
    opacity: 1;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

Disable animation in Angular 2 Material

You can disable animation using @.disabled property which is introduced in angular 4.3.1.

Either add below code to your component

@HostBinding('@.disabled') disabled = true

or in your html

<div [@.disabled]="expression"></div>

Here is working plnkr https://plnkr.co/edit/sVJM8H?p=preview

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

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

Angular animations don't work inside mat-tabs after switching back

Try this- the use of directive [matTabContent]

<mat-tab-group>
  <mat-tab label="First">
    <ng-template matTabContent>
      Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
    </ng-template>
  </mat-tab>
  <mat-tab label="Second">
    <ng-template matTabContent>
      Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}}
    </ng-template>
  </mat-tab>
  <mat-tab label="Third">
    <ng-template matTabContent>
      Content 3 - Loaded: {{getTimeLoaded(3) | date:'medium'}}
    </ng-template>
  </mat-tab>
</mat-tab-group>

How to disable gray wipe effect when clicking mat-menu-item

Just put !important after your background-color css to override mat's background color.

.active {
    border-left: 5px solid mat-color($accent);
    background-color: mat-color($primary) !important;
    color: $light-primary-text !important;
}