fix(badge): disable animations when using NoopAnimationsModule

Fixes the badge transitions not being disabled when using the `NoopAnimationsModule`.

Relates to #10590.

Author: crisbeto

src/lib/badge/_badge-theme.scss

@@ -4,6 +4,7 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
+@import '../core/style/noop-animation';
 @import '../../cdk/a11y/a11y';
 
 $mat-badge-font-size: 12px;
@@ -147,6 +148,7 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
   }
 
   .mat-badge-content {
+    @include _noop-animation();
     position: absolute;
     text-align: center;
     display: inline-block;

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;
@@ -99,7 +100,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) private _animationMode?: string) {}
 
   /** Whether the badge is above the host or not */
   isAbove(): boolean {
@@ -136,14 +138,18 @@ export class MatBadge implements OnDestroy {
     badgeElement.classList.add('mat-badge-content');
     badgeElement.textContent = this.content;
 
+    if (this._animationMode === 'NoopAnimations') {
+      badgeElement.classList.add('_mat-animation-noopable');
+    }
+
     if (this.description) {
       badgeElement.setAttribute('aria-label', this.description);
     }
 
     this._elementRef.nativeElement.appendChild(badgeElement);
 
     // animate in after insertion
-    if (typeof requestAnimationFrame === 'function') {
+    if (typeof requestAnimationFrame === 'function' && this._animationMode !== 'NoopAnimations') {
       this._ngZone.runOutsideAngular(() => {
         requestAnimationFrame(() => {
           badgeElement.classList.add(activeClass);