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 @@
-
+
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,