fix(tabs): disable all animations when using NoopAnimationsModule

Currently some animations in the tab components don't get disabled, when using the `NoopAnimationsModule`, because they don't go through the Angular animations. These changes ensure that everything will be disabled.

Fixes #10590.

Author: crisbeto

src/lib/tabs/_tabs-common.scss

@@ -1,4 +1,5 @@
 @import '../core/style/variables';
+@import '../core/style/noop-animation';
 @import '../../cdk/a11y/a11y';
 
 $mat-tab-bar-height: 48px !default;
@@ -49,6 +50,7 @@ $mat-tab-animation-duration: 500ms !default;
 @mixin ink-bar {
   $height: 2px;
 
+  @include _noop-animation();
   position: absolute;
   left: 0;
   bottom: 0;

src/lib/tabs/ink-bar.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Inject, InjectionToken, NgZone} from '@angular/core';
+import {Directive, ElementRef, Inject, InjectionToken, NgZone, Optional} from '@angular/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 /**
  * Interface for a a MatInkBar positioner method, defining the positioning and width of the ink
@@ -55,7 +56,8 @@ export class MatInkBar {
   constructor(
     private _elementRef: ElementRef<HTMLElement>,
     private _ngZone: NgZone,
-    @Inject(_MAT_INK_BAR_POSITIONER) private _inkBarPositioner: _MatInkBarPositioner) { }
+    @Inject(_MAT_INK_BAR_POSITIONER) private _inkBarPositioner: _MatInkBarPositioner,
+    @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string) { }
 
   /**
    * Calculates the styles from the provided element in order to align the ink-bar to that element.
@@ -93,6 +95,6 @@ export class MatInkBar {
     const inkBar = this._elementRef.nativeElement;
 
     inkBar.style.transform = `translateX(${positions.left}px) scaleX(${positions.width})`;
-    this.shouldAnimate = true;
+    this.shouldAnimate = this._animationMode !== 'NoopAnimations';
   }
 }

src/lib/tabs/tab-group.html

@@ -27,7 +27,10 @@
   </div>
 </mat-tab-header>
 
-<div class="mat-tab-body-wrapper" #tabBodyWrapper>
+<div
+  class="mat-tab-body-wrapper"
+  [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
+  #tabBodyWrapper>
   <mat-tab-body role="tabpanel"
                *ngFor="let tab of _tabs; let i = index"
                [id]="_getTabContentId(i)"

src/lib/tabs/tab-group.scss

@@ -1,5 +1,6 @@
 @import '../core/style/variables';
 @import '../core/style/layout-common';
+@import '../core/style/noop-animation';
 @import 'tabs-common';
 
 .mat-tab-group {
@@ -36,6 +37,7 @@
 
 // The bottom section of the view; contains the tab bodies
 .mat-tab-body-wrapper {
+  @include _noop-animation();
   position: relative;
   overflow: hidden;
   display: flex;

src/lib/tabs/tab-group.ts

@@ -22,17 +22,20 @@ import {
   QueryList,
   ViewChild,
   ViewEncapsulation,
+  Optional,
+  Inject,
 } from '@angular/core';
 import {
   CanColor,
   CanDisableRipple,
   mixinColor,
   mixinDisableRipple,
-  ThemePalette
+  ThemePalette,
 } from '@angular/material/core';
 import {merge, Subscription} from 'rxjs';
 import {MatTab} from './tab';
 import {MatTabHeader} from './tab-header';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 /** Used to generate unique ID's for each tab component */
@@ -147,7 +150,8 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
   private _groupId: number;
 
   constructor(elementRef: ElementRef,
-              private _changeDetectorRef: ChangeDetectorRef) {
+              private _changeDetectorRef: ChangeDetectorRef,
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     super(elementRef);
     this._groupId = nextId++;
   }

src/lib/tabs/tab-header.html

@@ -8,7 +8,12 @@
 
 <div class="mat-tab-label-container" #tabListContainer
      (keydown)="_handleKeydown($event)">
-  <div class="mat-tab-list" #tabList role="tablist" (cdkObserveContent)="_onContentChanges()">
+  <div
+    class="mat-tab-list"
+    [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
+    #tabList
+    role="tablist"
+    (cdkObserveContent)="_onContentChanges()">
     <div class="mat-tab-labels">
       <ng-content></ng-content>
     </div>

src/lib/tabs/tab-header.scss

@@ -1,5 +1,6 @@
 @import '../core/style/variables';
 @import '../core/style/layout-common';
+@import '../core/style/noop-animation';
 @import 'tabs-common';
 
 .mat-tab-header {
@@ -75,6 +76,7 @@
 }
 
 .mat-tab-list {
+  @include _noop-animation();
   flex-grow: 1;
   position: relative;
   transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);

src/lib/tabs/tab-header.ts

@@ -20,6 +20,7 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  Inject,
   OnDestroy,
   Optional,
   Output,
@@ -31,6 +32,7 @@ import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core';
 import {merge, of as observableOf, Subscription} from 'rxjs';
 import {MatInkBar} from './ink-bar';
 import {MatTabLabelWrapper} from './tab-label-wrapper';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 /**
@@ -131,7 +133,8 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
   constructor(private _elementRef: ElementRef,
               private _changeDetectorRef: ChangeDetectorRef,
               private _viewportRuler: ViewportRuler,
-              @Optional() private _dir: Directionality) {
+              @Optional() private _dir: Directionality,
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     super();
   }
 

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -46,6 +46,7 @@ import {
 import {merge, of as observableOf, Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {MatInkBar} from '../ink-bar';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 // Boilerplate for applying mixins to MatTabNav.
@@ -218,12 +219,12 @@ export class MatTabLink extends _MatTabLinkMixinBase
               ngZone: NgZone,
               platform: Platform,
               @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions,
-              @Attribute('tabindex') tabIndex: string) {
+              @Attribute('tabindex') tabIndex: string,
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super();
 
     this._tabLinkRipple = new RippleRenderer(this, ngZone, _elementRef, platform);
     this._tabLinkRipple.setupTriggerEvents(_elementRef.nativeElement);
-
     this.tabIndex = parseInt(tabIndex) || 0;
 
     if (globalOptions) {
@@ -233,6 +234,10 @@ export class MatTabLink extends _MatTabLinkMixinBase
         animation: globalOptions.animation,
       };
     }
+
+    if (animationMode === 'NoopAnimations') {
+      this.rippleConfig.animation = {enterDuration: 0, exitDuration: 0};
+    }
   }
 
   ngOnDestroy() {