fix(material-experimental/mdc-tabs): not disabling all animati… (#18446)

Fixes most of the MDC tab animations not being disabled when the `NoopAnimationsModule` is used.

Author: crisbeto

src/material-experimental/mdc-tabs/_tabs-common.scss

@@ -132,6 +132,14 @@ $mat-tab-animation-duration: 500ms !default;
     flex-grow: 1;
     position: relative;
     transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);
+
+    ._mat-animation-noopable & {
+      transition: none;
+    }
+  }
+
+  ._mat-animation-noopable .mdc-tab-indicator__content {
+    transition: none;
   }
 }
 

src/material-experimental/mdc-tabs/tab-header.html

@@ -11,11 +11,14 @@
   <div class="mat-mdc-tab-header-pagination-chevron"></div>
 </div>
 
-<div class="mat-mdc-tab-label-container" #tabListContainer (keydown)="_handleKeydown($event)">
+<div
+  class="mat-mdc-tab-label-container"
+  #tabListContainer
+  (keydown)="_handleKeydown($event)"
+  [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'">
   <div
     #tabList
     class="mat-mdc-tab-list"
-    [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
     role="tablist"
     (cdkObserveContent)="_onContentChanges()">
     <div class="mat-mdc-tab-labels">

src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.ts

@@ -58,6 +58,7 @@ import {takeUntil} from 'rxjs/operators';
     '[class.mat-primary]': 'color !== "warn" && color !== "accent"',
     '[class.mat-accent]': 'color === "accent"',
     '[class.mat-warn]': 'color === "warn"',
+    '[class._mat-animation-noopable]' : '_animationMode === "NoopAnimations"',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,