fix(form-field): disable all animations when using NoopAnimationsModu…

…le (#11371)

Disables all of the CSS-based animations in the form field when using the `NoopAnimationsModule`.

Relates to #10590.

src/lib/form-field/form-field-fill.scss

@@ -53,6 +53,12 @@ $mat-form-field-fill-subscript-padding:
     }
   }
 
+  &._mat-animation-noopable:not(.mat-form-field-disabled) .mat-form-field-flex:hover {
+    & ~ .mat-form-field-underline .mat-form-field-ripple {
+      transition: none;
+    }
+  }
+
   .mat-form-field-subscript-wrapper {
     padding: 0 $mat-form-field-fill-subscript-padding;
   }

src/lib/form-field/form-field-outline.scss

@@ -130,4 +130,14 @@ $mat-form-field-outline-subscript-padding:
   .mat-form-field-subscript-wrapper {
     padding: 0 $mat-form-field-outline-subscript-padding;
   }
+
+  &._mat-animation-noopable {
+    &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-outline,
+    .mat-form-field-outline,
+    .mat-form-field-outline-start,
+    .mat-form-field-outline-end,
+    .mat-form-field-outline-gap {
+      transition: none;
+    }
+  }
 }

src/lib/form-field/form-field-standard.scss

@@ -41,4 +41,10 @@ $mat-form-field-standard-padding-top: 0.75em !default;
       transition: opacity 600ms $swift-ease-out-timing-function;
     }
   }
+
+  &._mat-animation-noopable:not(.mat-form-field-disabled) .mat-form-field-flex:hover {
+    & ~ .mat-form-field-underline .mat-form-field-ripple {
+      transition: none;
+    }
+  }
 }

src/lib/form-field/form-field.scss

@@ -207,3 +207,10 @@ $mat-form-field-default-infix-width: 180px !default;
 .mat-error {
   display: block;
 }
+
+.mat-form-field._mat-animation-noopable {
+  .mat-form-field-label,
+  .mat-form-field-ripple {
+    transition: none;
+  }
+}

src/lib/form-field/form-field.ts

@@ -50,6 +50,7 @@ import {MatPlaceholder} from './placeholder';
 import {MatPrefix} from './prefix';
 import {MatSuffix} from './suffix';
 import {Platform} from '@angular/cdk/platform';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 let nextUniqueId = 0;
@@ -130,6 +131,7 @@ export const MAT_FORM_FIELD_DEFAULT_OPTIONS =
     '[class.ng-valid]': '_shouldForward("valid")',
     '[class.ng-invalid]': '_shouldForward("invalid")',
     '[class.ng-pending]': '_shouldForward("pending")',
+    '[class._mat-animation-noopable]': '!_animationsEnabled',
   },
   inputs: ['color'],
   encapsulation: ViewEncapsulation.None,
@@ -204,10 +206,11 @@ export class MatFormField extends _MatFormFieldMixinBase
   }
   private _floatLabel: FloatLabelType;
 
-  _outlineGapWidth = 0;
+  /** Whether the Angular animations are enabled. */
+  _animationsEnabled: boolean;
 
+  _outlineGapWidth = 0;
   _outlineGapStart = 0;
-
   _initialGapCalculated = false;
 
   /**
@@ -234,13 +237,15 @@ export class MatFormField extends _MatFormFieldMixinBase
       @Optional() private _dir: Directionality,
       @Optional() @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) private _defaultOptions:
           MatFormFieldDefaultOptions,
-      // @deletion-target 7.0.0 _platform and _ngZone to be made required.
+      // @deletion-target 7.0.0 _platform, _ngZone and _animationMode to be made required.
       private _platform?: Platform,
-      private _ngZone?: NgZone) {
+      private _ngZone?: NgZone,
+      @Optional() @Inject(ANIMATION_MODULE_TYPE) _animationMode?: string) {
     super(_elementRef);
 
     this._labelOptions = labelOptions ? labelOptions : {};
     this.floatLabel = this._labelOptions.float || 'auto';
+    this._animationsEnabled = _animationMode !== 'NoopAnimations';
   }
 
   /**
@@ -345,13 +350,17 @@ export class MatFormField extends _MatFormFieldMixinBase
   /** Animates the placeholder up and locks it in position. */
   _animateAndLockLabel(): void {
     if (this._hasFloatingLabel() && this._canLabelFloat) {
-      this._showAlwaysAnimate = true;
-      this.floatLabel = 'always';
+      // If animations are disabled, we shouldn't go in here,
+      // because the `transitionend` will never fire.
+      if (this._animationsEnabled) {
+        this._showAlwaysAnimate = true;
 
-      fromEvent(this._label.nativeElement, 'transitionend').pipe(take(1)).subscribe(() => {
-        this._showAlwaysAnimate = false;
-      });
+        fromEvent(this._label.nativeElement, 'transitionend').pipe(take(1)).subscribe(() => {
+          this._showAlwaysAnimate = false;
+        });
+      }
 
+      this.floatLabel = 'always';
       this._changeDetectorRef.markForCheck();
     }
   }

src/lib/input/input.spec.ts

@@ -27,7 +27,7 @@ import {
   MatFormFieldModule,
 } from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatInputModule} from './index';
 import {MatInput} from './input';
 import {MatStepperModule} from '@angular/material/stepper';
@@ -1203,7 +1203,7 @@ function createComponent<T>(component: Type<T>,
       FormsModule,
       MatFormFieldModule,
       MatInputModule,
-      NoopAnimationsModule,
+      BrowserAnimationsModule,
       PlatformModule,
       ReactiveFormsModule,
       ...imports