fix(material-experimental/mdc-radio): not removing animations when noop animations are enabled (#22651)

Fixes that the MDC-based radio button didn't disable its animations when noop animations were turned on.

(cherry picked from commit f116000)

Author: crisbeto

src/material-experimental/mdc-radio/radio.scss

@@ -5,7 +5,7 @@
 @use '../../cdk/a11y';
 @use '../../material/core/style/layout-common';
 
-@include mdc-radio.without-ripple($query: mdc-helpers.$mat-base-styles-query);
+@include mdc-radio.without-ripple($query: mdc-helpers.$mat-base-styles-without-animation-query);
 @include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);
 
 // This is necessary because we do not depend on MDC's ripple, but have our own that should be
@@ -21,6 +21,10 @@
   }
 }
 
+.mat-mdc-radio-button:not(._mat-animation-noopable) {
+  @include mdc-radio.without-ripple($query: animation);
+}
+
 // Note that this creates a square box around the circle, however it's consistent with
 // how IE/Edge treat native radio buttons in high contrast mode. We can't turn the border
 // into a dotted one, because it's too thick which causes the circles to look off.

src/material-experimental/mdc-radio/radio.ts

@@ -97,6 +97,7 @@ export class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
     '[class.mat-primary]': 'color === "primary"',
     '[class.mat-accent]': 'color === "accent"',
     '[class.mat-warn]': 'color === "warn"',
+    '[class._mat-animation-noopable]': '_noopAnimations',
     // Needs to be removed since it causes some a11y issues (see #21266).
     '[attr.tabindex]': 'null',
     '[attr.aria-label]': 'null',
@@ -126,10 +127,11 @@ export class MatRadioButton extends _MatRadioButtonBase implements AfterViewInit
   };
 
   /** Configuration for the underlying ripple. */
-  _rippleAnimation: RippleAnimationConfig = RIPPLE_ANIMATION_CONFIG;
+  _rippleAnimation: RippleAnimationConfig;
 
   _radioFoundation = new MDCRadioFoundation(this._radioAdapter);
   _classes: {[key: string]: boolean} = {};
+  _noopAnimations: boolean;
 
   constructor(@Optional() @Inject(MAT_RADIO_GROUP) radioGroup: MatRadioGroup,
               elementRef: ElementRef,
@@ -142,6 +144,9 @@ export class MatRadioButton extends _MatRadioButtonBase implements AfterViewInit
               @Attribute('tabindex') tabIndex?: string) {
     super(radioGroup, elementRef, _changeDetector, _focusMonitor,
         _radioDispatcher, _animationMode, _providerOverride, tabIndex);
+    this._noopAnimations = _animationMode === 'NoopAnimations';
+    this._rippleAnimation =
+        this._noopAnimations ? {enterDuration: 0, exitDuration: 0} : RIPPLE_ANIMATION_CONFIG;
   }
 
   ngAfterViewInit() {