From 4027d89cb888317768756419973901e4838df8e8 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Sat, 25 Aug 2018 14:15:04 +0200
Subject: [PATCH 1/2] 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.
---
 src/lib/button/_button-base.scss              |  6 +++--
 src/lib/button/button.scss                    |  2 +-
 src/lib/checkbox/checkbox.scss                | 11 +++++-----
 .../pseudo-checkbox/pseudo-checkbox.scss      |  5 +++--
 src/lib/core/style/_noop-animation.scss       | 22 -------------------
 src/lib/form-field/form-field-fill.scss       |  8 ++++---
 src/lib/form-field/form-field-outline.scss    |  2 +-
 src/lib/form-field/form-field-standard.scss   |  8 ++++---
 src/lib/form-field/form-field.scss            |  2 +-
 src/lib/progress-bar/progress-bar.scss        |  8 ++++---
 .../progress-spinner/progress-spinner.scss    | 16 ++++++++------
 src/lib/radio/radio.scss                      |  4 ++--
 src/lib/select/select.scss                    |  5 +++--
 src/lib/slide-toggle/slide-toggle.scss        |  4 ++--
 src/lib/slider/slider.scss                    |  3 ++-
 15 files changed, 49 insertions(+), 57 deletions(-)
 delete mode 100644 src/lib/core/style/_noop-animation.scss

diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss
index dc9377d45d78..e0cd1e2e1261 100644
--- a/src/lib/button/_button-base.scss
+++ b/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,7 +75,6 @@ $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);
@@ -84,6 +82,10 @@ $mat-mini-fab-padding: 8px !default;
   // 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
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index 30e23bd3bec6..3b321a634c6e 100644
--- a/src/lib/button/button.scss
+++ b/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;
   }
 
diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index 15e625cf80de..a5f57c7eaed6 100644
--- a/src/lib/checkbox/checkbox.scss
+++ b/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;
   }
 }
diff --git a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss
index cbb6e725e6a0..8b23f0a735db 100644
--- a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss
+++ b/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;
     }
diff --git a/src/lib/core/style/_noop-animation.scss b/src/lib/core/style/_noop-animation.scss
deleted file mode 100644
index 4e73745488a9..000000000000
--- a/src/lib/core/style/_noop-animation.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// If the mat-animation-noop class is present on the components root element,
-// prevent non css animations from running.
-// NOTE: Currently this mixin should only be used with components that do not
-// have any projected content.
-@mixin _noop-animation() {
-  // @at-root is used to steps outside of the hierarchy of the scss rules. This is
-  // done to allow a class to be added to be added to base of the scss nesting
-  // context.
-  // For example:
-  // .my-root {
-  //   .my-subclass {
-  //      @include _noop-animation();
-  //    }
-  // }
-  // results in:
-  // ._mat-animation-noopable.my-root .my-subclass { ... }
-  @at-root ._mat-animation-noopable#{&} {
-    transition: none;
-    animation: none;
-    @content;
-  }
-}
diff --git a/src/lib/form-field/form-field-fill.scss b/src/lib/form-field/form-field-fill.scss
index 98cc747314e6..67e5c4809375 100644
--- a/src/lib/form-field/form-field-fill.scss
+++ b/src/lib/form-field/form-field-fill.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;
+      }
     }
   }
 
diff --git a/src/lib/form-field/form-field-outline.scss b/src/lib/form-field/form-field-outline.scss
index 44f4725330b7..b611f006a3d9 100644
--- a/src/lib/form-field/form-field-outline.scss
+++ b/src/lib/form-field/form-field-outline.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,
diff --git a/src/lib/form-field/form-field-standard.scss b/src/lib/form-field/form-field-standard.scss
index 16a8ce349c9f..deb3ef168cd0 100644
--- a/src/lib/form-field/form-field-standard.scss
+++ b/src/lib/form-field/form-field-standard.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;
+      }
     }
   }
 }
diff --git a/src/lib/form-field/form-field.scss b/src/lib/form-field/form-field.scss
index 24f079973978..7e00763d396c 100644
--- a/src/lib/form-field/form-field.scss
+++ b/src/lib/form-field/form-field.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;
diff --git a/src/lib/progress-bar/progress-bar.scss b/src/lib/progress-bar/progress-bar.scss
index 55be72a7beb9..fd0ecb29cca8 100644
--- a/src/lib/progress-bar/progress-bar.scss
+++ b/src/lib/progress-bar/progress-bar.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,
diff --git a/src/lib/progress-spinner/progress-spinner.scss b/src/lib/progress-spinner/progress-spinner.scss
index b0a75766af55..681bddcc85f7 100644
--- a/src/lib/progress-spinner/progress-spinner.scss
+++ b/src/lib/progress-spinner/progress-spinner.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;
     }
   }
diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
index 02d50f4569c0..92d8f5347907 100644
--- a/src/lib/radio/radio.scss
+++ b/src/lib/radio/radio.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;
   }
 
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 22365e7f64d5..7b9b46e63e4e 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.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;
   }
 
diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss
index 086f969f431b..53c132b187c0 100644
--- a/src/lib/slide-toggle/slide-toggle.scss
+++ b/src/lib/slide-toggle/slide-toggle.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;
   }
 }
diff --git a/src/lib/slider/slider.scss b/src/lib/slider/slider.scss
index b49324917ba7..d4f6fd2b6d32 100644
--- a/src/lib/slider/slider.scss
+++ b/src/lib/slider/slider.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,

From 905d620c1f2b7beead07e5ea31b659e6536c3ce3 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Sun, 26 Aug 2018 16:26:09 +0200
Subject: [PATCH 2/2] Allow [@.disabled] binding on component host

* It can happen that someone applies `[@.disabled]` directly on the component host element (e.g. `<mat-tab-group [@.disabled]="disableAnimations"]></mat-tab-group>`)
---
 src/lib/button/_button-base.scss              |  2 +-
 src/lib/checkbox/checkbox.scss                |  2 +-
 .../pseudo-checkbox/pseudo-checkbox.scss      |  2 +-
 src/lib/form-field/form-field-fill.scss       |  2 +-
 src/lib/form-field/form-field-outline.scss    |  2 +-
 src/lib/form-field/form-field-standard.scss   |  2 +-
 src/lib/form-field/form-field.scss            |  2 +-
 src/lib/progress-bar/progress-bar.scss        |  4 +--
 .../progress-spinner/progress-spinner.scss    |  2 +-
 src/lib/select/select.scss                    |  9 ++++---
 src/lib/slider/slider.scss                    | 26 +++++++++----------
 11 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/lib/button/_button-base.scss b/src/lib/button/_button-base.scss
index e0cd1e2e1261..e91684798841 100644
--- a/src/lib/button/_button-base.scss
+++ b/src/lib/button/_button-base.scss
@@ -83,7 +83,7 @@ $mat-mini-fab-padding: 8px !default;
   transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
               mat-elevation-transition-property-value();
 
-  &._mat-animation-noopable, .ng-animate-disabled & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
     transition: none;
   }
 }
diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index a5f57c7eaed6..a27e2fc7140c 100644
--- a/src/lib/checkbox/checkbox.scss
+++ b/src/lib/checkbox/checkbox.scss
@@ -177,7 +177,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
               mat-elevation-transition-property-value();
 
-  &._mat-animation-noopable, .ng-animate-disabled & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
     transition: none;
   }
 
diff --git a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss
index 8b23f0a735db..ae27650346f9 100644
--- a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss
+++ b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.scss
@@ -35,7 +35,7 @@ $_mat-pseudo-checkmark-size: $mat-checkbox-size - (2 * $_mat-pseudo-checkbox-pad
     border-color: transparent;
   }
 
-  &._mat-animation-noopable, .ng-animate-disabled & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
     transition: none;
 
     &::after {
diff --git a/src/lib/form-field/form-field-fill.scss b/src/lib/form-field/form-field-fill.scss
index 67e5c4809375..d7f3242c4125 100644
--- a/src/lib/form-field/form-field-fill.scss
+++ b/src/lib/form-field/form-field-fill.scss
@@ -63,7 +63,7 @@ $mat-form-field-fill-subscript-padding:
   }
 
   &:not(.mat-form-field-disabled) {
-    &._mat-animation-noopable, .ng-animate-disabled & {
+    &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-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-outline.scss b/src/lib/form-field/form-field-outline.scss
index b611f006a3d9..6d2c8bdefe71 100644
--- a/src/lib/form-field/form-field-outline.scss
+++ b/src/lib/form-field/form-field-outline.scss
@@ -133,7 +133,7 @@ $mat-form-field-outline-subscript-padding:
     padding: 0 $mat-form-field-outline-subscript-padding;
   }
 
-  &._mat-animation-noopable, .ng-animate-disabled & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .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,
diff --git a/src/lib/form-field/form-field-standard.scss b/src/lib/form-field/form-field-standard.scss
index deb3ef168cd0..a71f705c993b 100644
--- a/src/lib/form-field/form-field-standard.scss
+++ b/src/lib/form-field/form-field-standard.scss
@@ -60,7 +60,7 @@ $mat-form-field-standard-padding-top: 0.75em !default;
   }
 
   &:not(.mat-form-field-disabled) {
-    &._mat-animation-noopable, .ng-animate-disabled & {
+    &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-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 7e00763d396c..a996d239dd28 100644
--- a/src/lib/form-field/form-field.scss
+++ b/src/lib/form-field/form-field.scss
@@ -222,7 +222,7 @@ $mat-form-field-default-infix-width: 180px !default;
   position: relative;
 }
 
-.mat-form-field._mat-animation-noopable, .ng-animate-disabled .mat-form-field {
+._mat-animation-noopable, .ng-animate-disabled {
   .mat-form-field-label,
   .mat-form-field-ripple {
     transition: none;
diff --git a/src/lib/progress-bar/progress-bar.scss b/src/lib/progress-bar/progress-bar.scss
index fd0ecb29cca8..77e424faa41d 100644
--- a/src/lib/progress-bar/progress-bar.scss
+++ b/src/lib/progress-bar/progress-bar.scss
@@ -16,7 +16,7 @@ $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 & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
     transition: none;
   }
 
@@ -139,7 +139,7 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   }
 
   // Disabled animations handling.
-  &._mat-animation-noopable, .ng-animate-disabled & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
     .mat-progress-bar-fill,
     .mat-progress-bar-fill::after,
     .mat-progress-bar-buffer,
diff --git a/src/lib/progress-spinner/progress-spinner.scss b/src/lib/progress-spinner/progress-spinner.scss
index 681bddcc85f7..d61c9aaca4b0 100644
--- a/src/lib/progress-spinner/progress-spinner.scss
+++ b/src/lib/progress-spinner/progress-spinner.scss
@@ -11,7 +11,7 @@ $_mat-progress-spinner-default-circumference: $pi * $_mat-progress-spinner-defau
   display: block;
   position: relative;
 
-  &._mat-animation-noopable, .ng-animate-disabled & {
+  &._mat-animation-noopable, &.ng-animate-disabled, .ng-animate-disabled & {
     animation: none;
 
     circle {
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 7b9b46e63e4e..538ec504245e 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -68,9 +68,12 @@ $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 &,
-  .ng-animate-disabled .mat-form-field-appearance-standard .mat-select.mat-select-empty & {
-    transition: none;
+  .mat-form-field-appearance-standard {
+    .ng-animate-disabled &, &.ng-animate-disabled, &._mat-animation-noopable {
+      .mat-select.mat-select-empty {
+        transition: none;
+      }
+    }
   }
 }
 
diff --git a/src/lib/slider/slider.scss b/src/lib/slider/slider.scss
index d4f6fd2b6d32..301f90223059 100644
--- a/src/lib/slider/slider.scss
+++ b/src/lib/slider/slider.scss
@@ -469,18 +469,18 @@ $mat-slider-focus-ring-size: 30px !default;
   }
 }
 
-// Slider inside a component with disabled animations.
-.mat-slider._mat-animation-noopable,
-.ng-animate-disabled .mat-slider {
-  .mat-slider-track-fill,
-  .mat-slider-track-background,
-  .mat-slider-ticks,
-  .mat-slider-thumb-container,
-  .mat-slider-focus-ring,
-  .mat-slider-thumb,
-  .mat-slider-thumb-label,
-  .mat-slider-thumb-label-text,
-  .mat-slider-has-ticks .mat-slider-wrapper::after {
-    transition: none;
+.mat-slider {
+  .ng-animate-disabled &, &.ng-animate-disabled, &._mat-animation-noopable {
+    .mat-slider-track-fill,
+    .mat-slider-track-background,
+    .mat-slider-ticks,
+    .mat-slider-thumb-container,
+    .mat-slider-focus-ring,
+    .mat-slider-thumb,
+    .mat-slider-thumb-label,
+    .mat-slider-thumb-label-text,
+    .mat-slider-has-ticks .mat-slider-wrapper::after {
+      transition: none;
+    }
   }
 }