From 9fcdacd27b344b0c13f98ba5eabdcd9ec2c7c7cf Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 9 Feb 2020 19:38:05 +0100
Subject: [PATCH] fix(material-experimental/mdc-tabs): not disabling all
 animations with noop animations module

Fixes most of the MDC tab animations not being disabled when the `NoopAnimationsModule` is used.
---
 src/material-experimental/mdc-tabs/_tabs-common.scss      | 8 ++++++++
 src/material-experimental/mdc-tabs/tab-header.html        | 7 +++++--
 .../mdc-tabs/tab-nav-bar/tab-nav-bar.ts                   | 1 +
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/material-experimental/mdc-tabs/_tabs-common.scss b/src/material-experimental/mdc-tabs/_tabs-common.scss
index 461c41710ae4..850dbe03eecc 100644
--- a/src/material-experimental/mdc-tabs/_tabs-common.scss
+++ b/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;
   }
 }
 
diff --git a/src/material-experimental/mdc-tabs/tab-header.html b/src/material-experimental/mdc-tabs/tab-header.html
index 64dd17e7cf6a..bb0d58bf46f0 100644
--- a/src/material-experimental/mdc-tabs/tab-header.html
+++ b/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">
diff --git a/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.ts b/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.ts
index d008b850f756..dae44809468e 100644
--- a/src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/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,