fix(progress-bar): query state animation not working (#11459)

Currently the animation for a progress bar in the `query` state is disabled by default due to the `_noop-animation` producing the wrong selector. It looks like using the ampersand inside interpolation (e.g. in `@at-root ._mat-animation-noopable#{&}`) doesn't work as expected once we have more than one selector. What ends up happening is that SASS interpolates the first selector, but then leaves the other one as it is, which causes it to disable the animation.

Fixes #11453.

Author: crisbeto

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

@@ -40,7 +40,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   // The progress bar buffer is the bar indicator showing the buffer value and is only visible
   // beyond the current value of the primary progress bar.
   .mat-progress-bar-buffer {
-    @include _noop-animation();
     transform-origin: top left;
     transition: transform $mat-progress-bar-piece-animation-duration ease;
 
@@ -58,7 +57,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
 
   // The progress bar fill fills the progress bar with the indicator color.
   .mat-progress-bar-fill {
-    @include _noop-animation();
     animation: none;
     transform-origin: top left;
     transition: transform $mat-progress-bar-piece-animation-duration ease;
@@ -70,7 +68,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
 
   // A pseudo element is created for each progress bar bar that fills with the indicator color.
   .mat-progress-bar-fill::after {
-    @include _noop-animation();
     animation: none;
     content: '';
     display: inline-block;
@@ -95,27 +92,23 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   &[mode='indeterminate'],
   &[mode='query'] {
     .mat-progress-bar-fill {
-      @include _noop-animation();
       transition: none;
     }
     .mat-progress-bar-primary {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include _noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-primary-indeterminate-translate
           $mat-progress-bar-full-animation-duration infinite linear;
       left: -145.166611%;
     }
     .mat-progress-bar-primary.mat-progress-bar-fill::after {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include _noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-primary-indeterminate-scale
           $mat-progress-bar-full-animation-duration infinite linear;
     }
     .mat-progress-bar-secondary {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include _noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-secondary-indeterminate-translate
           $mat-progress-bar-full-animation-duration infinite linear;
@@ -124,7 +117,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
     }
     .mat-progress-bar-secondary.mat-progress-bar-fill::after {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include _noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-secondary-indeterminate-scale
           $mat-progress-bar-full-animation-duration infinite linear;
@@ -134,7 +126,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   &[mode='buffer'] {
     .mat-progress-bar-background {
       // Avoids stacked animation tearing in Firefox >= 57.
-      @include _noop-animation();
       @include backface-visibility(hidden);
       animation: mat-progress-bar-background-scroll
           $mat-progress-bar-piece-animation-duration infinite linear;
@@ -144,6 +135,21 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
       display: block;
     }
   }
+
+  // Disabled animations handling.
+  &._mat-animation-noopable {
+    .mat-progress-bar-fill,
+    .mat-progress-bar-fill::after,
+    .mat-progress-bar-buffer,
+    .mat-progress-bar-primary,
+    .mat-progress-bar-primary.mat-progress-bar-fill::after,
+    .mat-progress-bar-secondary,
+    .mat-progress-bar-secondary.mat-progress-bar-fill::after,
+    .mat-progress-bar-background {
+      animation: none;
+      transition: none;
+    }
+  }
 }