From 9062640b9a1ff98432218fc8ec59332ff154e781 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 25 May 2018 19:31:05 +0200 Subject: [PATCH] fix(form-field): disable all animations when using NoopAnimationsModule (#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 | 6 +++++ src/lib/form-field/form-field-outline.scss | 10 ++++++++ src/lib/form-field/form-field-standard.scss | 6 +++++ src/lib/form-field/form-field.scss | 7 ++++++ src/lib/form-field/form-field.ts | 27 ++++++++++++++------- src/lib/input/input.spec.ts | 4 +-- 6 files changed, 49 insertions(+), 11 deletions(-) diff --git a/src/lib/form-field/form-field-fill.scss b/src/lib/form-field/form-field-fill.scss index 28c4a321a0ad..c0ed2e6f8572 100644 --- a/src/lib/form-field/form-field-fill.scss +++ b/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; } diff --git a/src/lib/form-field/form-field-outline.scss b/src/lib/form-field/form-field-outline.scss index f6ec99212a07..2c91754c0a70 100644 --- a/src/lib/form-field/form-field-outline.scss +++ b/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; + } + } } diff --git a/src/lib/form-field/form-field-standard.scss b/src/lib/form-field/form-field-standard.scss index 99e846cb2860..6a6e8904e6e0 100644 --- a/src/lib/form-field/form-field-standard.scss +++ b/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; + } + } } diff --git a/src/lib/form-field/form-field.scss b/src/lib/form-field/form-field.scss index 8739aa5e81e7..db6075a9bf08 100644 --- a/src/lib/form-field/form-field.scss +++ b/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; + } +} diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts index fb77d14d5cd5..c9742ac89e1c 100644 --- a/src/lib/form-field/form-field.ts +++ b/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(); } } diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts index e165192fb5e1..e64fe9635ba4 100644 --- a/src/lib/input/input.spec.ts +++ b/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(component: Type, FormsModule, MatFormFieldModule, MatInputModule, - NoopAnimationsModule, + BrowserAnimationsModule, PlatformModule, ReactiveFormsModule, ...imports