diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss index aaa2f1983262..e9a76247e63e 100644 --- a/src/lib/slide-toggle/slide-toggle.scss +++ b/src/lib/slide-toggle/slide-toggle.scss @@ -109,9 +109,12 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg // make the drag feeling fast and not delayed. &.mat-dragging, &:active { @include cursor-grabbing; - transition-duration: 0ms; } + + ._mat-animation-noopable & { + transition: none; + } } // The visual thumb element that moves inside of the thumb bar. @@ -162,6 +165,10 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg transition: $swift-linear; transition-property: background-color; transition-delay: 50ms; + + ._mat-animation-noopable & { + transition: none; + } } // Ripple positioning for the slide-toggle. Moves the ripple container into the center of the thumb. diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index 30a2caa01fac..776091cb4daa 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -24,6 +24,8 @@ import { ViewChild, ViewEncapsulation, NgZone, + Optional, + Inject, } from '@angular/core'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; import { @@ -39,6 +41,7 @@ import { mixinTabIndex, RippleRef, } from '@angular/material/core'; +import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; // Increasing integer for generating unique ids for slide-toggle components. let nextUniqueId = 0; @@ -77,6 +80,7 @@ export const _MatSlideToggleMixinBase = '[class.mat-checked]': 'checked', '[class.mat-disabled]': 'disabled', '[class.mat-slide-toggle-label-before]': 'labelPosition == "before"', + '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', }, templateUrl: 'slide-toggle.html', styleUrls: ['slide-toggle.css'], @@ -167,7 +171,8 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro private _focusMonitor: FocusMonitor, private _changeDetectorRef: ChangeDetectorRef, @Attribute('tabindex') tabIndex: string, - private _ngZone: NgZone) { + private _ngZone: NgZone, + @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) { super(elementRef); this.tabIndex = parseInt(tabIndex) || 0;