Skip to content

Commit af78b97

Browse files
crisbetotinayuangao
authored andcommitted
fix(radio): disable animations when using NoopAnimationsModule (#11296)
Disables the CSS-based animations in the radio buttons when the `NoopAnimationsModule` is used.
1 parent 93b5892 commit af78b97

File tree

2 files changed

+14
-1
lines changed

2 files changed

+14
-1
lines changed

src/lib/radio/radio.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@ $mat-radio-ripple-radius: 25px;
4747
style: solid;
4848
radius: 50%;
4949
}
50+
51+
._mat-animation-noopable & {
52+
transition: none;
53+
}
5054
}
5155

5256
// The inner circle for the radio, shown when checked.
@@ -64,6 +68,10 @@ $mat-radio-ripple-radius: 25px;
6468
// IE to flash the entire circle for a couple of frames, throwing off the entire animation.
6569
transform: scale(0.001);
6670

71+
._mat-animation-noopable & {
72+
transition: none;
73+
}
74+
6775
.mat-radio-checked & {
6876
transform: scale(0.5);
6977

src/lib/radio/radio.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import {
2828
QueryList,
2929
ViewChild,
3030
ViewEncapsulation,
31+
Inject,
3132
} from '@angular/core';
3233
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
3334
import {
@@ -42,6 +43,8 @@ import {
4243
mixinTabIndex,
4344
RippleRef,
4445
} from '@angular/material/core';
46+
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
47+
4548

4649
// Increasing integer for generating unique ids for radio components.
4750
let nextUniqueId = 0;
@@ -324,6 +327,7 @@ export const _MatRadioButtonMixinBase =
324327
'class': 'mat-radio-button',
325328
'[class.mat-radio-checked]': 'checked',
326329
'[class.mat-radio-disabled]': 'disabled',
330+
'[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
327331
'[attr.id]': 'id',
328332
// Note: under normal conditions focus shouldn't land on this element, however it may be
329333
// programmatically set, for example inside of a focus trap, in this case we want to forward
@@ -467,7 +471,8 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
467471
elementRef: ElementRef,
468472
private _changeDetector: ChangeDetectorRef,
469473
private _focusMonitor: FocusMonitor,
470-
private _radioDispatcher: UniqueSelectionDispatcher) {
474+
private _radioDispatcher: UniqueSelectionDispatcher,
475+
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
471476
super(elementRef);
472477

473478
// Assertions. Ideally these should be stripped out by the compiler.

0 commit comments

Comments
 (0)