fix(button): disable all animations when using the NoopAnimationsModule (#11477)

Disables all of the button transitions and animations when the directive is inside a module with the `NoopAnimationsModule`.

Relates to #10590.

Author: crisbeto

src/lib/button/_button-base.scss

@@ -1,6 +1,7 @@
 @import '../core/style/variables';
 @import '../core/style/elevation';
 @import '../core/style/button-common';
+@import '../core/style/noop-animation';
 
 
 // Flat and raised button standards
@@ -76,6 +77,7 @@ $mat-mini-fab-padding: 8px !default;
 @mixin mat-raised-button {
   @include mat-button-base;
   @include mat-overridable-elevation(2);
+  @include _noop-animation();
 
   // Force hardware acceleration.
   transform: translate3d(0, 0, 0);

src/lib/button/button.scss

@@ -88,6 +88,10 @@
 
   transition: $mat-button-focus-transition;
 
+  ._mat-animation-noopable & {
+    transition: none;
+  }
+
   @include cdk-high-contrast {
     // Note that IE will render this in the same way, no
     // matter whether the theme is light or dark. This helps

src/lib/button/button.ts

@@ -15,6 +15,8 @@ import {
   OnDestroy,
   ViewChild,
   ViewEncapsulation,
+  Optional,
+  Inject,
 } from '@angular/core';
 import {
   CanColor,
@@ -25,6 +27,7 @@ import {
   mixinDisabled,
   mixinDisableRipple
 } from '@angular/material/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 /** Default color palette for round buttons (mat-fab and mat-mini-fab) */
 const DEFAULT_ROUND_BUTTON_COLOR = 'accent';
@@ -65,6 +68,7 @@ export const _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(M
   exportAs: 'matButton',
   host: {
     '[disabled]': 'disabled || null',
+    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
   },
   templateUrl: 'button.html',
   styleUrls: ['button.css'],
@@ -91,7 +95,9 @@ export class MatButton extends _MatButtonMixinBase
                */
               // tslint:disable-next-line:no-unused-variable
               private _platform: Platform,
-              private _focusMonitor: FocusMonitor) {
+              private _focusMonitor: FocusMonitor,
+              // @deletion-target 7.0.0 `_animationMode` parameter to be made required.
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     super(elementRef);
 
     // For each of the variant selectors that is prevent in the button's host
@@ -147,6 +153,7 @@ export class MatButton extends _MatButtonMixinBase
     '[attr.disabled]': 'disabled || null',
     '[attr.aria-disabled]': 'disabled.toString()',
     '(click)': '_haltDisabledEvents($event)',
+    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
   },
   inputs: ['disabled', 'disableRipple', 'color'],
   templateUrl: 'button.html',
@@ -156,8 +163,13 @@ export class MatButton extends _MatButtonMixinBase
 })
 export class MatAnchor extends MatButton {
 
-  constructor(platform: Platform, focusMonitor: FocusMonitor, elementRef: ElementRef) {
-    super(elementRef, platform, focusMonitor);
+  constructor(
+    platform: Platform,
+    focusMonitor: FocusMonitor,
+    elementRef: ElementRef,
+    // @deletion-target 7.0.0 `animationMode` parameter to be made required.
+    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
+    super(elementRef, platform, focusMonitor, animationMode);
   }
 
   _haltDisabledEvents(event: Event) {

src/lib/core/style/_noop-animation.scss

@@ -9,7 +9,7 @@
   // For example:
   // .my-root {
   //   .my-subclass {
-  //      @include _noop-animation()
+  //      @include _noop-animation();
   //    }
   // }
   // results in: