fix(chips): disable all animations when using NoopAnimationsModule (#11546)

Disables all of the chip animations and transitions when the consumer is using the `NoopAnimationsModule`. Also cleans up some repetitive code.

Relates to #10590.

Author: crisbeto

src/material/chips/chip.ts

@@ -41,6 +41,7 @@ import {
 } from '@angular/material/core';
 import {Subject} from 'rxjs';
 import {take} from 'rxjs/operators';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 /** Represents an event fired on an individual `mat-chip`. */
@@ -105,6 +106,7 @@ export class MatChipTrailingIcon {}
     '[class.mat-chip-with-avatar]': 'avatar',
     '[class.mat-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
     '[class.mat-chip-disabled]': 'disabled',
+    '[class._mat-animation-noopable]': '_animationsDisabled',
     '[attr.disabled]': 'disabled || null',
     '[attr.aria-disabled]': 'disabled.toString()',
     '[attr.aria-selected]': 'ariaSelected',
@@ -139,6 +141,9 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
   /** Whether the chip has focus. */
   _hasFocus: boolean = false;
 
+  /** Whether animations for the chip are enabled. */
+  _animationsDisabled: boolean;
+
   /** Whether the chip list is selectable */
   chipListSelectable: boolean = true;
 
@@ -224,18 +229,21 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
         this.selected.toString() : null;
   }
 
-  constructor(public _elementRef: ElementRef,
+  constructor(public _elementRef: ElementRef<HTMLElement>,
               private _ngZone: NgZone,
               platform: Platform,
               @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
-              globalRippleOptions: RippleGlobalOptions | null) {
+              globalRippleOptions: RippleGlobalOptions | null,
+              // @breaking-change 8.0.0 `animationMode` parameter to become required.
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super(_elementRef);
 
     this._addHostClassName();
 
     this._chipRipple = new RippleRenderer(this, _ngZone, _elementRef, platform);
     this._chipRipple.setupTriggerEvents(_elementRef.nativeElement);
     this.rippleConfig = globalRippleOptions || {};
+    this._animationsDisabled = animationMode === 'NoopAnimations';
   }
 
   _addHostClassName() {

src/material/chips/chips.scss

@@ -1,6 +1,7 @@
 @import '../core/style/variables';
 @import '../core/style/elevation';
 @import '../core/style/layout-common';
+@import '../core/style/noop-animation';
 @import '../../cdk/a11y/a11y';
 
 $mat-chip-min-height: 32px;
@@ -36,6 +37,7 @@ $mat-chip-remove-size: 18px;
 
 .mat-standard-chip {
   @include mat-elevation-transition;
+  @include _noop-animation;
   display: inline-flex;
   padding: $mat-chip-vertical-padding $mat-chip-horizontal-padding;
   border-radius: 16px;

tools/public_api_guard/material/chips.d.ts

@@ -1,8 +1,9 @@
 export declare const MAT_CHIPS_DEFAULT_OPTIONS: InjectionToken<MatChipsDefaultOptions>;
 
 export declare class MatChip extends _MatChipMixinBase implements FocusableOption, OnDestroy, CanColor, CanDisable, CanDisableRipple, RippleTarget {
+    _animationsDisabled: boolean;
     _chipListMultiple: boolean;
-    _elementRef: ElementRef;
+    _elementRef: ElementRef<HTMLElement>;
     _hasFocus: boolean;
     readonly _onBlur: Subject<MatChipEvent>;
     readonly _onFocus: Subject<MatChipEvent>;
@@ -24,7 +25,7 @@ export declare class MatChip extends _MatChipMixinBase implements FocusableOptio
     readonly selectionChange: EventEmitter<MatChipSelectionChange>;
     trailingIcon: MatChipTrailingIcon;
     value: any;
-    constructor(_elementRef: ElementRef, _ngZone: NgZone, platform: Platform, globalRippleOptions: RippleGlobalOptions | null);
+    constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, platform: Platform, globalRippleOptions: RippleGlobalOptions | null, animationMode?: string);
     _addHostClassName(): void;
     _blur(): void;
     _handleClick(event: Event): void;