Skip to content

Commit

Permalink
fix(radio): disable animations when using NoopAnimationsModule (#11296)
Browse files Browse the repository at this point in the history
Disables the CSS-based animations in the radio buttons when the `NoopAnimationsModule` is used.
  • Loading branch information
crisbeto authored and tinayuangao committed May 15, 2018
1 parent 6515d9c commit 1bf6d23
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 1 deletion.
8 changes: 8 additions & 0 deletions src/lib/radio/radio.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@ $mat-radio-ripple-radius: 25px;
style: solid;
radius: 50%;
}

._mat-animation-noopable & {
transition: none;
}
}

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

._mat-animation-noopable & {
transition: none;
}

.mat-radio-checked & {
transform: scale(0.5);

Expand Down
7 changes: 6 additions & 1 deletion src/lib/radio/radio.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {
QueryList,
ViewChild,
ViewEncapsulation,
Inject,
} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import {
Expand All @@ -42,6 +43,8 @@ import {
mixinTabIndex,
RippleRef,
} from '@angular/material/core';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';


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

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

0 comments on commit 1bf6d23

Please sign in to comment.