Skip to content

Commit 89e1e21

Browse files
committed
fix(slide-toggle): disable animations when using NoopAnimationsModule
Fixes the slide toggle transitions not being disabled when using the `NoopAnimationsModule`. Relates to #10590.
1 parent abc3d38 commit 89e1e21

File tree

2 files changed

+11
-2
lines changed

2 files changed

+11
-2
lines changed

src/lib/slide-toggle/slide-toggle.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
107107

108108
// Once the thumb container is being dragged around, we remove the transition duration to
109109
// make the drag feeling fast and not delayed.
110-
&.mat-dragging, &:active {
110+
&.mat-dragging, &:active, ._mat-animation-noopable & {
111111
@include cursor-grabbing;
112112

113113
transition-duration: 0ms;
@@ -162,6 +162,10 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
162162
transition: $swift-linear;
163163
transition-property: background-color;
164164
transition-delay: 50ms;
165+
166+
._mat-animation-noopable & {
167+
transition: none;
168+
}
165169
}
166170

167171
// Ripple positioning for the slide-toggle. Moves the ripple container into the center of the thumb.

src/lib/slide-toggle/slide-toggle.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import {
2424
ViewChild,
2525
ViewEncapsulation,
2626
NgZone,
27+
Optional,
28+
Inject,
2729
} from '@angular/core';
2830
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
2931
import {
@@ -39,6 +41,7 @@ import {
3941
mixinTabIndex,
4042
RippleRef,
4143
} from '@angular/material/core';
44+
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
4245

4346
// Increasing integer for generating unique ids for slide-toggle components.
4447
let nextUniqueId = 0;
@@ -77,6 +80,7 @@ export const _MatSlideToggleMixinBase =
7780
'[class.mat-checked]': 'checked',
7881
'[class.mat-disabled]': 'disabled',
7982
'[class.mat-slide-toggle-label-before]': 'labelPosition == "before"',
83+
'[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
8084
},
8185
templateUrl: 'slide-toggle.html',
8286
styleUrls: ['slide-toggle.css'],
@@ -167,7 +171,8 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
167171
private _focusMonitor: FocusMonitor,
168172
private _changeDetectorRef: ChangeDetectorRef,
169173
@Attribute('tabindex') tabIndex: string,
170-
private _ngZone: NgZone) {
174+
private _ngZone: NgZone,
175+
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
171176

172177
super(elementRef);
173178
this.tabIndex = parseInt(tabIndex) || 0;

0 commit comments

Comments
 (0)