fix: missing components not respecting disabled animations

* Ensures that all components with custom CSS transitions respect the `NoopAnimationsModule` or `[@.disabled]` state.

Related to #12829

Author: devversion

src/lib/badge/_badge-theme.scss

@@ -137,6 +137,10 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
     white-space: nowrap;
     text-overflow: ellipsis;
     pointer-events: none;
+
+    ._mat-animation-noopable &, .ng-animate-disabled & {
+      transition: none;
+    }
   }
 
   // The active class is added after the element is added

src/lib/badge/badge.ts

@@ -11,6 +11,7 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {DOCUMENT} from '@angular/common';
 import {Directive, ElementRef, Inject, Input, NgZone, OnDestroy, Optional} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 let nextId = 0;
@@ -32,6 +33,7 @@ export type MatBadgeSize = 'small' | 'medium' | 'large';
     '[class.mat-badge-medium]': 'size === "medium"',
     '[class.mat-badge-large]': 'size === "large"',
     '[class.mat-badge-hidden]': 'hidden || !_hasContent',
+    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
   },
 })
 export class MatBadge implements OnDestroy {
@@ -102,7 +104,8 @@ export class MatBadge implements OnDestroy {
       @Optional() @Inject(DOCUMENT) private _document: any,
       private _ngZone: NgZone,
       private _elementRef: ElementRef,
-      private _ariaDescriber: AriaDescriber) {}
+      private _ariaDescriber: AriaDescriber,
+      @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {}
 
   /** Whether the badge is above the host or not */
   isAbove(): boolean {

src/lib/button/_button-base.scss

@@ -86,6 +86,10 @@ $mat-mini-fab-padding: 8px !default;
   transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
               mat-elevation-transition-property-value();
 
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
+    transition: none;
+  }
+
   &:not([disabled]):active {
     @include mat-overridable-elevation(8);
   }

src/lib/card/card.scss

@@ -16,6 +16,10 @@ $mat-card-header-size: 40px !default;
   padding: $mat-card-default-padding;
   border-radius: $mat-card-border-radius;
 
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
+    transition: none;
+  }
+
   .mat-divider-horizontal {
     position: absolute;
     left: 0;

src/lib/card/card.ts

@@ -7,12 +7,15 @@
  */
 
 import {
-  Component,
-  ViewEncapsulation,
   ChangeDetectionStrategy,
+  Component,
   Directive,
+  Inject,
   Input,
+  Optional,
+  ViewEncapsulation,
 } from '@angular/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 /**
@@ -156,9 +159,14 @@ export class MatCardAvatar {}
   styleUrls: ['card.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {'class': 'mat-card'}
+  host: {
+    'class': 'mat-card',
+    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+  }
 })
-export class MatCard {}
+export class MatCard {
+  constructor(@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {}
+}
 
 
 /**

src/lib/chips/chip.ts

@@ -36,6 +36,7 @@ import {
   RippleRenderer,
   RippleTarget
 } from '@angular/material/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {Subject} from 'rxjs';
 import {take} from 'rxjs/operators';
 
@@ -104,6 +105,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]': '_animationMode === "NoopAnimations"',
     '[attr.disabled]': 'disabled || null',
     '[attr.aria-disabled]': 'disabled.toString()',
     '[attr.aria-selected]': 'ariaSelected',
@@ -221,7 +223,8 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
   constructor(public _elementRef: ElementRef,
               private _ngZone: NgZone,
               platform: Platform,
-              @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions) {
+              @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions,
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     super(_elementRef);
 
     this._addHostClassName();

src/lib/chips/chips.scss

@@ -40,6 +40,10 @@ $mat-chip-remove-size: 18px;
     height: $mat-chip-remove-size;
   }
 
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
+    transition: none;
+  }
+
   &:focus {
     @include mat-elevation(3);
     outline: none;

src/lib/expansion/expansion-panel.scss

@@ -13,6 +13,10 @@
   transition: margin 225ms $mat-fast-out-slow-in-timing-function;
   border-radius: $border-radius;
 
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
+    transition: none;
+  }
+
   .mat-accordion & {
     &:not(.mat-expanded), &:not(.mat-expansion-panel-spacing) {
       border-radius: 0;

src/lib/expansion/expansion-panel.ts

@@ -33,6 +33,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {Subject} from 'rxjs';
 import {filter, startWith, take} from 'rxjs/operators';
 import {MatAccordion} from './accordion';
@@ -74,6 +75,7 @@ let uniqueId = 0;
     'class': 'mat-expansion-panel',
     '[class.mat-expanded]': 'expanded',
     '[class.mat-expansion-panel-spacing]': '_hasSpacing()',
+    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
   }
 })
 export class MatExpansionPanel extends CdkAccordionItem implements AfterContentInit, OnChanges,
@@ -121,8 +123,10 @@ export class MatExpansionPanel extends CdkAccordionItem implements AfterContentI
               _changeDetectorRef: ChangeDetectorRef,
               _uniqueSelectionDispatcher: UniqueSelectionDispatcher,
               private _viewContainerRef: ViewContainerRef,
-              @Inject(DOCUMENT) _document?: any) {
+              @Inject(DOCUMENT) _document?: any,
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     super(accordion, _changeDetectorRef, _uniqueSelectionDispatcher);
+
     this.accordion = accordion;
     this._document = _document;
   }

src/lib/sidenav/drawer.scss

@@ -51,6 +51,13 @@ $mat-drawer-over-drawer-z-index: 4;
   &.mat-drawer-container-explicit-backdrop .mat-drawer-side {
     z-index: $mat-drawer-backdrop-z-index;
   }
+
+  // Note that the `NoopAnimationsModule` is being handled inside of the component code.
+  &.ng-animate-disabled, .ng-animate-disabled & {
+    .mat-drawer-backdrop, .mat-drawer-content {
+      transition: none;
+    }
+  }
 }
 
 .mat-drawer-backdrop {