fix(material/core): noop animations not applying to selector lists (#…

…24904)

The way the `private-animation-noop` mixin was written meant that if it was included in a list of selectors, it would only be applied to the first selector in the list. This caused some animations in the MDC button not to be disabled.

These changes simplify the mixin, because the old approach was only relevant for on case in the progress spinner that we can write out manually instead.

(cherry picked from commit cc5326c)

src/material/core/style/_private.scss

@@ -22,20 +22,11 @@
 // NOTE: Currently this mixin should only be used with components that do not
 // have any projected content.
 @mixin private-animation-noop() {
-  // @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 mat-private-animation-noop();
-  //    }
-  // }
-  // results in:
-  // ._mat-animation-noopable.my-root .my-subclass { ... }
-  @at-root ._mat-animation-noopable#{&} {
-    transition: none;
-    animation: none;
+  &._mat-animation-noopable {
+    // Use !important here since we don't know what context this mixin will
+    // be included in and MDC can have some really specific selectors.
+    transition: none !important;
+    animation: none !important;
     @content;
   }
 }

src/material/progress-spinner/progress-spinner.scss

@@ -1,7 +1,6 @@
 @use '@angular/cdk';
 
 @use '../core/style/variables';
-@use '../core/style/private';
 
 $_default-radius: 45px;
 $_default-circumference: variables.$pi * $_default-radius * 2;
@@ -24,7 +23,6 @@ $_default-circumference: variables.$pi * $_default-radius * 2;
   }
 
   circle {
-    @include private.private-animation-noop();
     fill: transparent;
     transition: stroke-dashoffset 225ms linear;
 
@@ -37,22 +35,27 @@ $_default-circumference: variables.$pi * $_default-radius * 2;
     }
   }
 
-  &.mat-progress-spinner-indeterminate-animation[mode='indeterminate'] {
+  &[mode='indeterminate'] {
     svg {
-      @include private.private-animation-noop();
       animation: mat-progress-spinner-linear-rotate variables.$swift-ease-in-out-duration * 4
           linear infinite;
     }
 
     circle {
-      @include private.private-animation-noop();
       transition-property: stroke;
       // Note: we multiply the duration by 8, because the animation is spread out in 8 stages.
       animation-duration: variables.$swift-ease-in-out-duration * 8;
       animation-timing-function: variables.$ease-in-out-curve-function;
       animation-iteration-count: infinite;
     }
   }
+
+  &._mat-animation-noopable {
+    svg, circle {
+      animation: none;
+      transition: none;
+    }
+  }
 }