feat: respect animation @.disabled binding

For custom CSS transitions we currently only check whether the `NoopAnimationsModule` is used or not. If noop animations are used, we apply a CSS class that can be used to set the `transition` or `animation` to `none`.

Since developers can toggle the animations dynamically through the `[@.disabled]` binding (which goes down the component tree), we should also respect this binding because such binding is commonly used.

Also instead of using a mixin that does magic, we should explicitly manage the selectors in order to keep the generated CSS as predictable and small as possible.

Author: devversion

src/lib/button/_button-base.scss

@@ -1,7 +1,6 @@
 @import '../core/style/variables';
 @import '../core/style/elevation';
 @import '../core/style/button-common';
-@import '../core/style/noop-animation';
 
 
 // Flat and raised button standards
@@ -76,14 +75,17 @@ $mat-mini-fab-padding: 8px !default;
 // Applies styles to buttons with backgrounds: raised, fab, and mini-fab
 @mixin mat-raised-button {
   @include mat-button-base;
-  @include _noop-animation();
 
   // Force hardware acceleration.
   transform: translate3d(0, 0, 0);
 
   // Animation.
   transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
               mat-elevation-transition-property-value();
+
+  &._mat-animation-noopable, .ng-animate-disabled & {
+    transition: none;
+  }
 }
 
 // Applies styles to fab and mini-fab button types only

src/lib/button/button.scss

@@ -112,7 +112,7 @@
 
   transition: $mat-button-focus-transition;
 
-  ._mat-animation-noopable & {
+  ._mat-animation-noopable &, .ng-animate-disabled & {
     transition: none;
   }
 

src/lib/checkbox/checkbox.scss

@@ -3,7 +3,6 @@
 @import '../core/style/checkbox-common';
 @import '../core/ripple/ripple';
 @import '../core/style/layout-common';
-@import '../core/style/noop-animation';
 @import '../../cdk/a11y/a11y';
 
 // Manual calculation done on SVG
@@ -174,12 +173,14 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 }
 
 .mat-checkbox {
-  @include _noop-animation();
-
   // Animation
   transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
               mat-elevation-transition-property-value();
 
+  &._mat-animation-noopable, .ng-animate-disabled & {
+    transition: none;
+  }
+
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 
@@ -237,7 +238,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
     style: solid;
   }
 
-  ._mat-animation-noopable & {
+  ._mat-animation-noopable &, .ng-animate-disabled & {
     transition: none;
   }
 
@@ -260,7 +261,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
                   $mat-linear-out-slow-in-timing-function,
               opacity $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;
 
-  ._mat-animation-noopable & {
+  ._mat-animation-noopable &, .ng-animate-disabled & {
     transition: none;
   }
 }

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

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

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

@@ -62,9 +62,11 @@ $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;
+  &:not(.mat-form-field-disabled) {
+    &._mat-animation-noopable, .ng-animate-disabled & {
+      .mat-form-field-flex:hover ~ .mat-form-field-underline .mat-form-field-ripple {
+        transition: none;
+      }
     }
   }
 

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

@@ -133,7 +133,7 @@ $mat-form-field-outline-subscript-padding:
     padding: 0 $mat-form-field-outline-subscript-padding;
   }
 
-  &._mat-animation-noopable {
+  &._mat-animation-noopable, .ng-animate-disabled & {
     &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-outline,
     .mat-form-field-outline,
     .mat-form-field-outline-start,

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

@@ -59,9 +59,11 @@ $mat-form-field-standard-padding-top: 0.75em !default;
     }
   }
 
-  &._mat-animation-noopable:not(.mat-form-field-disabled) .mat-form-field-flex:hover {
-    & ~ .mat-form-field-underline .mat-form-field-ripple {
-      transition: none;
+  &:not(.mat-form-field-disabled) {
+    &._mat-animation-noopable, .ng-animate-disabled & {
+      .mat-form-field-flex:hover ~ .mat-form-field-underline .mat-form-field-ripple {
+        transition: none;
+      }
     }
   }
 }

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

@@ -222,7 +222,7 @@ $mat-form-field-default-infix-width: 180px !default;
   position: relative;
 }
 
-.mat-form-field._mat-animation-noopable {
+.mat-form-field._mat-animation-noopable, .ng-animate-disabled .mat-form-field {
   .mat-form-field-label,
   .mat-form-field-ripple {
     transition: none;

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

@@ -1,6 +1,5 @@
 @import '../core/style/variables';
 @import '../core/style/vendor-prefixes';
-@import '../core/style/noop-animation';
 @import '../../cdk/a11y/a11y';
 
 $mat-progress-bar-height: 4px !default;
@@ -9,7 +8,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
 
 
 .mat-progress-bar {
-  @include _noop-animation();
   display: block;
   // Height is provided for mat-progress-bar to act as a default.
   height: $mat-progress-bar-height;
@@ -18,6 +16,10 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   transition: opacity $mat-progress-bar-piece-animation-duration linear;
   width: 100%;
 
+  &._mat-animation-noopable, .ng-animate-disabled & {
+    transition: none;
+  }
+
   // Base styles that are re-used across all of the progress bar children.
   .mat-progress-bar-element, .mat-progress-bar-fill::after {
     height: 100%;
@@ -137,7 +139,7 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   }
 
   // Disabled animations handling.
-  &._mat-animation-noopable {
+  &._mat-animation-noopable, .ng-animate-disabled & {
     .mat-progress-bar-fill,
     .mat-progress-bar-fill::after,
     .mat-progress-bar-buffer,

src/lib/progress-bar/progress-bar.scss

@@ -1,6 +1,4 @@
 @import '../core/style/variables';
-@import '../core/style/noop-animation';
-
 
 // Animation config
 $mat-progress-spinner-stroke-rotate-fallback-duration: 10 * 1000ms !default;
@@ -13,6 +11,15 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
   display: block;
   position: relative;
 
+  &._mat-animation-noopable, .ng-animate-disabled & {
+    animation: none;
+
+    circle {
+      animation: none;
+      transition: none;
+    }
+  }
+
   svg {
     position: absolute;
     transform: rotate(-90deg);
@@ -23,19 +30,16 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
   }
 
   circle {
-    @include _noop-animation();
     fill: transparent;
     transform-origin: center;
     transition: stroke-dashoffset 225ms linear;
   }
 
   &.mat-progress-spinner-indeterminate-animation[mode='indeterminate'] {
-    @include _noop-animation();
     animation: mat-progress-spinner-linear-rotate $swift-ease-in-out-duration * 4
         linear infinite;
 
     circle {
-      @include _noop-animation();
       transition-property: stroke;
       // Note: we multiply the duration by 8, because the animation is spread out in 8 stages.
       animation-duration: $swift-ease-in-out-duration * 8;
@@ -45,14 +49,12 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
   }
 
   &.mat-progress-spinner-indeterminate-fallback-animation[mode='indeterminate'] {
-    @include _noop-animation();
     animation: mat-progress-spinner-stroke-rotate-fallback
                $mat-progress-spinner-stroke-rotate-fallback-duration
                $mat-progress-spinner-stroke-rotate-fallback-ease
                infinite;
 
     circle {
-      @include _noop-animation();
       transition-property: stroke;
     }
   }

src/lib/progress-spinner/progress-spinner.scss

@@ -49,7 +49,7 @@ $mat-radio-ripple-radius: 20px;
     radius: 50%;
   }
 
-  ._mat-animation-noopable & {
+  ._mat-animation-noopable &, .ng-animate-disabled & {
     transition: none;
   }
 }
@@ -69,7 +69,7 @@ $mat-radio-ripple-radius: 20px;
   // IE to flash the entire circle for a couple of frames, throwing off the entire animation.
   transform: scale(0.001);
 
-  ._mat-animation-noopable & {
+  ._mat-animation-noopable &, .ng-animate-disabled & {
     transition: none;
   }
 

src/lib/radio/radio.scss

@@ -68,7 +68,8 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
     transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
   }
 
-  ._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty & {
+  ._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty &,
+  .ng-animate-disabled .mat-form-field-appearance-standard .mat-select.mat-select-empty & {
     transition: none;
   }
 }
@@ -121,7 +122,7 @@ $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 & {
+  ._mat-animation-noopable &, .ng-animate-disabled & {
     transition: none;
   }
 

src/lib/select/select.scss

@@ -118,7 +118,7 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
     transition-duration: 0ms;
   }
 
-  ._mat-animation-noopable & {
+  ._mat-animation-noopable &, .ng-animate-disabled & {
     transition: none;
   }
 
@@ -173,7 +173,7 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   transition-property: background-color;
   transition-delay: 50ms;
 
-  ._mat-animation-noopable & {
+  ._mat-animation-noopable &, .ng-animate-disabled & {
     transition: none;
   }
 }

src/lib/slide-toggle/slide-toggle.scss

@@ -470,7 +470,8 @@ $mat-slider-focus-ring-size: 30px !default;
 }
 
 // Slider inside a component with disabled animations.
-.mat-slider._mat-animation-noopable {
+.mat-slider._mat-animation-noopable,
+.ng-animate-disabled .mat-slider {
   .mat-slider-track-fill,
   .mat-slider-track-background,
   .mat-slider-ticks,