fix(select): disable all animations when using NoopAnimationsModule (#11594)

Disables all the CSS-based transition in `mat-select` when it's inside something with the `NoopAnimationsModule`.

Relates to #10590.

Author: crisbeto

src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -1,4 +1,5 @@
 @import '../../style/checkbox-common';
+@import '../../style/noop-animation';
 
 // Padding inside of a pseudo checkbox.
 $_mat-pseudo-checkbox-padding: $mat-checkbox-border-width * 2;
@@ -34,6 +35,12 @@ $_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-pad
   &.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
     border-color: transparent;
   }
+
+  @include _noop-animation {
+    &::after {
+      transition: none;
+    }
+  }
 }
 
 .mat-pseudo-checkbox-disabled {

src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts

@@ -6,8 +6,20 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ViewEncapsulation, Input, ChangeDetectionStrategy} from '@angular/core';
+import {
+  Component,
+  ViewEncapsulation,
+  Input,
+  ChangeDetectionStrategy,
+  Inject,
+  Optional,
+} from '@angular/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
+/**
+ * Possible states for a pseudo checkbox.
+ * @docs-private
+ */
 export type MatPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
 
 /**
@@ -35,6 +47,7 @@ export type MatPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
     '[class.mat-pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
     '[class.mat-pseudo-checkbox-checked]': 'state === "checked"',
     '[class.mat-pseudo-checkbox-disabled]': 'disabled',
+    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
   },
 })
 export class MatPseudoCheckbox {
@@ -43,4 +56,6 @@ export class MatPseudoCheckbox {
 
   /** Whether the checkbox is disabled. */
   @Input() disabled: boolean = false;
+
+  constructor(@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) { }
 }

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

@@ -17,5 +17,6 @@
   @at-root ._mat-animation-noopable#{&} {
     transition: none;
     animation: none;
+    @content;
   }
 }

src/lib/select/select.scss

@@ -105,6 +105,10 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   transition: color $swift-ease-out-duration $swift-ease-out-duration / 3
       $swift-ease-out-timing-function;
 
+  ._mat-animation-noopable & {
+    transition: none;
+  }
+
   .mat-form-field-hide-placeholder & {
     color: transparent;