+ [matRippleRadius]="25"
+ [matRippleCentered]="true"
+ [matRippleAnimation]="{enterDuration: 300}">
diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts
index 048a3c09fdb3..e3906795f95e 100644
--- a/src/lib/checkbox/checkbox.spec.ts
+++ b/src/lib/checkbox/checkbox.spec.ts
@@ -4,7 +4,7 @@ import {Component, DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {dispatchFakeEvent} from '@angular/cdk/testing';
import {MatCheckbox, MatCheckboxChange, MatCheckboxModule} from './index';
-import {RIPPLE_FADE_IN_DURATION, RIPPLE_FADE_OUT_DURATION} from '@angular/material/core';
+import {defaultRippleAnimationConfig} from '@angular/material/core';
import {MAT_CHECKBOX_CLICK_ACTION} from './checkbox-config';
import {MutationObserverFactory} from '@angular/cdk/observers';
@@ -390,13 +390,13 @@ describe('MatCheckbox', () => {
dispatchFakeEvent(inputElement, 'keydown');
dispatchFakeEvent(inputElement, 'focus');
- tick(RIPPLE_FADE_IN_DURATION);
+ tick(defaultRippleAnimationConfig.enterDuration);
expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
.toBe(1, 'Expected ripple after element is focused.');
dispatchFakeEvent(checkboxInstance._inputElement.nativeElement, 'blur');
- tick(RIPPLE_FADE_OUT_DURATION);
+ tick(defaultRippleAnimationConfig.exitDuration);
expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
.toBe(0, 'Expected no ripple after element is blurred.');
diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts
index f1bb87c89486..4e213262fa1f 100644
--- a/src/lib/checkbox/checkbox.ts
+++ b/src/lib/checkbox/checkbox.ts
@@ -36,7 +36,6 @@ import {
mixinDisabled,
mixinDisableRipple,
mixinTabIndex,
- RippleConfig,
RippleRef,
} from '@angular/material/core';
import {MAT_CHECKBOX_CLICK_ACTION, MatCheckboxClickAction} from './checkbox-config';
@@ -180,9 +179,6 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
/** Reference to the ripple instance of the checkbox. */
@ViewChild(MatRipple) ripple: MatRipple;
- /** Ripple configuration for the mouse ripples and focus indicators. */
- _rippleConfig: RippleConfig = {centered: true, radius: 25, speedFactor: 1.5};
-
/**
* Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
* @docs-private
@@ -341,7 +337,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
/** Function is called whenever the focus changes for the input element. */
private _onInputFocusChange(focusOrigin: FocusOrigin) {
if (!this._focusRipple && focusOrigin === 'keyboard') {
- this._focusRipple = this.ripple.launch(0, 0, {persistent: true, ...this._rippleConfig});
+ this._focusRipple = this.ripple.launch(0, 0, {persistent: true});
} else if (!focusOrigin) {
this._removeFocusRipple();
this.onTouched();
diff --git a/src/lib/core/ripple/ripple-renderer.ts b/src/lib/core/ripple/ripple-renderer.ts
index a01c808e754e..9a42d14f1e56 100644
--- a/src/lib/core/ripple/ripple-renderer.ts
+++ b/src/lib/core/ripple/ripple-renderer.ts
@@ -9,26 +9,27 @@ import {ElementRef, NgZone} from '@angular/core';
import {Platform, supportsPassiveEventListeners} from '@angular/cdk/platform';
import {RippleRef, RippleState} from './ripple-ref';
-/** Fade-in duration for the ripples. Can be modified with the speedFactor option. */
-export const RIPPLE_FADE_IN_DURATION = 450;
-
-/** Fade-out duration for the ripples in milliseconds. This can't be modified by the speedFactor. */
-export const RIPPLE_FADE_OUT_DURATION = 400;
-
-/**
- * Timeout for ignoring mouse events. Mouse events will be temporary ignored after touch
- * events to avoid synthetic mouse events.
- */
-const IGNORE_MOUSE_EVENTS_TIMEOUT = 800;
-
export type RippleConfig = {
color?: string;
centered?: boolean;
radius?: number;
- speedFactor?: number;
persistent?: boolean;
+ animation?: RippleAnimationConfig;
+ /** @deprecated Use the animation property instead. */
+ speedFactor?: number;
};
+/**
+ * Interface that describes the configuration for the animation of a ripple.
+ * There are two animation phases with different durations for the ripples.
+ */
+export interface RippleAnimationConfig {
+ /** Duration in milliseconds for the enter animation (expansion from point of contact). */
+ enterDuration?: number;
+ /** Duration in milliseconds for the exit animation (fade-out). */
+ exitDuration?: number;
+}
+
/**
* Interface that describes the target for launching ripples.
* It defines the ripple configuration and disabled state for interaction ripples.
@@ -37,11 +38,25 @@ export type RippleConfig = {
export interface RippleTarget {
/** Configuration for ripples that are launched on pointer down. */
rippleConfig: RippleConfig;
-
/** Whether ripples on pointer down should be disabled. */
rippleDisabled: boolean;
}
+/**
+ * Default ripple animation configuration for ripples without an explicit
+ * animation config specified.
+ */
+export const defaultRippleAnimationConfig = {
+ enterDuration: 450,
+ exitDuration: 400
+};
+
+/**
+ * Timeout for ignoring mouse events. Mouse events will be temporary ignored after touch
+ * events to avoid synthetic mouse events.
+ */
+const ignoreMouseEventsTimeout = 800;
+
/**
* Helper service that performs DOM manipulations. Not intended to be used outside this module.
* The constructor takes a reference to the ripple directive's host element and a map of DOM
@@ -99,6 +114,7 @@ export class RippleRenderer {
*/
fadeInRipple(x: number, y: number, config: RippleConfig = {}): RippleRef {
const containerRect = this._containerElement.getBoundingClientRect();
+ const animationConfig = {...defaultRippleAnimationConfig, ...config.animation};
if (config.centered) {
x = containerRect.left + containerRect.width / 2;
@@ -106,9 +122,9 @@ export class RippleRenderer {
}
const radius = config.radius || distanceToFurthestCorner(x, y, containerRect);
- const duration = RIPPLE_FADE_IN_DURATION / (config.speedFactor || 1);
const offsetX = x - containerRect.left;
const offsetY = y - containerRect.top;
+ const duration = animationConfig.enterDuration / (config.speedFactor || 1);
const ripple = document.createElement('div');
ripple.classList.add('mat-ripple-element');
@@ -159,8 +175,9 @@ export class RippleRenderer {
}
const rippleEl = rippleRef.element;
+ const animationConfig = {...defaultRippleAnimationConfig, ...rippleRef.config.animation};
- rippleEl.style.transitionDuration = `${RIPPLE_FADE_OUT_DURATION}ms`;
+ rippleEl.style.transitionDuration = `${animationConfig.exitDuration}ms`;
rippleEl.style.opacity = '0';
rippleRef.state = RippleState.FADING_OUT;
@@ -169,7 +186,7 @@ export class RippleRenderer {
this.runTimeoutOutsideZone(() => {
rippleRef.state = RippleState.HIDDEN;
rippleEl.parentNode!.removeChild(rippleEl);
- }, RIPPLE_FADE_OUT_DURATION);
+ }, animationConfig.exitDuration);
}
/** Fades out all currently active ripples. */
@@ -197,7 +214,7 @@ export class RippleRenderer {
/** Function being called whenever the trigger is being pressed using mouse. */
private onMousedown = (event: MouseEvent) => {
const isSyntheticEvent = this._lastTouchStartEvent &&
- Date.now() < this._lastTouchStartEvent + IGNORE_MOUSE_EVENTS_TIMEOUT;
+ Date.now() < this._lastTouchStartEvent + ignoreMouseEventsTimeout;
if (!this._target.rippleDisabled && !isSyntheticEvent) {
this._isPointerDown = true;
diff --git a/src/lib/core/ripple/ripple.md b/src/lib/core/ripple/ripple.md
index c0aaf9850846..b0b708f6e0e3 100644
--- a/src/lib/core/ripple/ripple.md
+++ b/src/lib/core/ripple/ripple.md
@@ -75,8 +75,11 @@ Global ripple options can be specified by setting the `MAT_RIPPLE_GLOBAL_OPTIONS
```ts
const globalRippleConfig: RippleGlobalOptions = {
disabled: true,
- baseSpeedFactor: 1.5 // Ripples will animate 50% faster than before.
-}
+ animation: {
+ enterDuration: 300,
+ exitDuration: 0
+ }
+};
@NgModule({
providers: [
@@ -86,3 +89,23 @@ const globalRippleConfig: RippleGlobalOptions = {
```
All available global options can be seen in the `RippleGlobalOptions` interface.
+
+### Disabling animation
+
+The animation of ripples can be disabled by using the `animation` global option. If the
+`enterDuration` and `exitDuration` is being set to `0`, ripples will just appear without any
+animation.
+
+This is specifically useful in combination with the `disabled` global option, because globally
+disabling ripples won't affect the focus indicator ripples. If someone still wants to disable
+those ripples for performance reasons, the duration can be set to `0`, to remove the ripple feel.
+
+```ts
+const globalRippleConfig: RippleGlobalOptions = {
+ disabled: true,
+ animation: {
+ enterDuration: 0,
+ exitDuration: 0
+ }
+};
+```
diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts
index 4f03b58975b9..5f2734da3661 100644
--- a/src/lib/core/ripple/ripple.spec.ts
+++ b/src/lib/core/ripple/ripple.spec.ts
@@ -2,11 +2,13 @@ import {TestBed, ComponentFixture, fakeAsync, tick, inject} from '@angular/core/
import {Component, ViewChild} from '@angular/core';
import {Platform} from '@angular/cdk/platform';
import {dispatchMouseEvent, dispatchTouchEvent} from '@angular/cdk/testing';
-import {RIPPLE_FADE_OUT_DURATION, RIPPLE_FADE_IN_DURATION} from './ripple-renderer';
+import {defaultRippleAnimationConfig, RippleAnimationConfig} from './ripple-renderer';
import {
MatRipple, MatRippleModule, MAT_RIPPLE_GLOBAL_OPTIONS, RippleState, RippleGlobalOptions
} from './index';
+/** Shorthands for the enter and exit duration of ripples. */
+const {enterDuration, exitDuration} = defaultRippleAnimationConfig;
describe('MatRipple', () => {
let fixture: ComponentFixture
;
@@ -108,12 +110,12 @@ describe('MatRipple', () => {
dispatchTouchEvent(rippleTarget, 'touchstart');
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
- tick(RIPPLE_FADE_IN_DURATION);
+ tick(enterDuration);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
dispatchTouchEvent(rippleTarget, 'touchend');
- tick(RIPPLE_FADE_OUT_DURATION);
+ tick(exitDuration);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
}));
@@ -122,12 +124,12 @@ describe('MatRipple', () => {
dispatchTouchEvent(rippleTarget, 'touchstart');
dispatchTouchEvent(rippleTarget, 'mousedown');
- tick(RIPPLE_FADE_IN_DURATION);
+ tick(enterDuration);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
dispatchTouchEvent(rippleTarget, 'touchend');
- tick(RIPPLE_FADE_OUT_DURATION);
+ tick(exitDuration);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
}));
@@ -139,7 +141,7 @@ describe('MatRipple', () => {
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
// Calculates the duration for fading-in and fading-out the ripple.
- tick(RIPPLE_FADE_IN_DURATION + RIPPLE_FADE_OUT_DURATION);
+ tick(enterDuration + exitDuration);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
}));
@@ -151,19 +153,19 @@ describe('MatRipple', () => {
// Fakes the duration of fading-in and fading-out normal ripples.
// The fade-out duration has been added to ensure that didn't start fading out.
- tick(RIPPLE_FADE_IN_DURATION + RIPPLE_FADE_OUT_DURATION);
+ tick(enterDuration + exitDuration);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
dispatchMouseEvent(rippleTarget, 'mouseup');
- tick(RIPPLE_FADE_OUT_DURATION);
+ tick(exitDuration);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
}));
it('should not hide ripples while animating.', fakeAsync(() => {
// Calculates the duration for fading-in and fading-out the ripple.
- let hideDuration = RIPPLE_FADE_IN_DURATION + RIPPLE_FADE_OUT_DURATION;
+ let hideDuration = enterDuration + exitDuration;
dispatchMouseEvent(rippleTarget, 'mousedown');
dispatchMouseEvent(rippleTarget, 'mouseup');
@@ -323,13 +325,13 @@ describe('MatRipple', () => {
// Calculates the duration for fading-in and fading-out the ripple. Also adds some
// extra time to demonstrate that the ripples are persistent.
- tick(RIPPLE_FADE_IN_DURATION + RIPPLE_FADE_OUT_DURATION + 5000);
+ tick(enterDuration + exitDuration + 5000);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
rippleRef.fadeOut();
- tick(RIPPLE_FADE_OUT_DURATION);
+ tick(exitDuration);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
}));
@@ -341,11 +343,11 @@ describe('MatRipple', () => {
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
- tick(RIPPLE_FADE_IN_DURATION / 2);
+ tick(enterDuration / 2);
rippleDirective.fadeOutAll();
- tick(RIPPLE_FADE_OUT_DURATION);
+ tick(exitDuration);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length)
.toBe(0, 'Expected no ripples to be active after calling fadeOutAll.');
@@ -359,7 +361,7 @@ describe('MatRipple', () => {
expect(rippleRef.state).toBe(RippleState.FADING_IN);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
- tick(RIPPLE_FADE_IN_DURATION);
+ tick(enterDuration);
expect(rippleRef.state).toBe(RippleState.VISIBLE);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
@@ -369,12 +371,25 @@ describe('MatRipple', () => {
expect(rippleRef.state).toBe(RippleState.FADING_OUT);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
- tick(RIPPLE_FADE_OUT_DURATION);
+ tick(exitDuration);
expect(rippleRef.state).toBe(RippleState.HIDDEN);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
}));
+ it('should allow setting a specific animation config for a ripple', fakeAsync(() => {
+ expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+
+ rippleDirective.launch(0, 0, {
+ animation: {enterDuration: 120, exitDuration: 0}
+ });
+
+ expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
+
+ tick(120);
+
+ expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+ }));
});
describe('global ripple options', () => {
@@ -449,7 +464,7 @@ describe('MatRipple', () => {
let fadeInFactor = 1 / 0.5;
// Calculates the duration for fading-in and fading-out the ripple.
- tick(RIPPLE_FADE_IN_DURATION * fadeInFactor + RIPPLE_FADE_OUT_DURATION);
+ tick(enterDuration * fadeInFactor + exitDuration);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
}));
@@ -466,11 +481,25 @@ describe('MatRipple', () => {
let fadeInFactor = 1 / (0.5 * 1.5);
// Calculates the duration for fading-in and fading-out the ripple.
- tick(RIPPLE_FADE_IN_DURATION * fadeInFactor + RIPPLE_FADE_OUT_DURATION);
+ tick(enterDuration * fadeInFactor + exitDuration);
expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
}));
+ it('should support changing the animation duration', fakeAsync(() => {
+ createTestComponent({
+ animation: {enterDuration: 100, exitDuration: 100}
+ });
+
+ rippleDirective.launch(0, 0);
+
+ expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
+
+ // Wait the 200ms of the enter duration and exit duration.
+ tick(100 + 100);
+
+ expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+ }));
});
describe('configuring behavior', () => {
@@ -487,7 +516,7 @@ describe('MatRipple', () => {
});
it('sets ripple color', () => {
- let backgroundColor = 'rgba(12, 34, 56, 0.8)';
+ const backgroundColor = 'rgba(12, 34, 56, 0.8)';
controller.color = backgroundColor;
fixture.detectChanges();
@@ -583,6 +612,20 @@ describe('MatRipple', () => {
expect(pxStringToFloat(ripple.style.width)).toBeCloseTo(2 * customRadius, 1);
expect(pxStringToFloat(ripple.style.height)).toBeCloseTo(2 * customRadius, 1);
});
+
+ it('should be able to specify animation config through binding', fakeAsync(() => {
+ controller.animationConfig = {enterDuration: 150, exitDuration: 150};
+ fixture.detectChanges();
+
+ dispatchMouseEvent(rippleTarget, 'mousedown');
+ dispatchMouseEvent(rippleTarget, 'mouseup');
+
+ expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
+
+ tick(150 + 150);
+
+ expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+ }));
});
});
@@ -607,12 +650,14 @@ class BasicRippleContainer {
[matRippleCentered]="centered"
[matRippleRadius]="radius"
[matRippleDisabled]="disabled"
+ [matRippleAnimation]="animationConfig"
[matRippleColor]="color">
+ [matRippleCentered]="true"
+ [matRippleRadius]="23"
+ [matRippleAnimation]="{enterDuration: 300}">
diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts
index ddae2c3c640a..37cdaad4c076 100644
--- a/src/lib/radio/radio.spec.ts
+++ b/src/lib/radio/radio.spec.ts
@@ -3,7 +3,7 @@ import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/f
import {Component, DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {dispatchFakeEvent} from '@angular/cdk/testing';
-import {RIPPLE_FADE_IN_DURATION, RIPPLE_FADE_OUT_DURATION} from '@angular/material/core';
+import {defaultRippleAnimationConfig} from '@angular/material/core';
import {MatRadioButton, MatRadioChange, MatRadioGroup, MatRadioModule} from './index';
describe('MatRadio', () => {
@@ -205,13 +205,13 @@ describe('MatRadio', () => {
dispatchFakeEvent(radioInputElements[0], 'keydown');
dispatchFakeEvent(radioInputElements[0], 'focus');
- tick(RIPPLE_FADE_IN_DURATION);
+ tick(defaultRippleAnimationConfig.enterDuration);
expect(radioNativeElements[0].querySelectorAll('.mat-ripple-element').length)
.toBe(1, 'Expected one ripple after keyboard focus.');
dispatchFakeEvent(radioInputElements[0], 'blur');
- tick(RIPPLE_FADE_OUT_DURATION);
+ tick(defaultRippleAnimationConfig.exitDuration);
expect(radioNativeElements[0].querySelectorAll('.mat-ripple-element').length)
.toBe(0, 'Expected no ripples on blur.');
diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts
index b13b2cb03c92..9bf2e53d859f 100644
--- a/src/lib/radio/radio.ts
+++ b/src/lib/radio/radio.ts
@@ -38,7 +38,6 @@ import {
mixinColor,
mixinDisabled,
mixinDisableRipple,
- RippleConfig,
RippleRef,
} from '@angular/material/core';
@@ -475,9 +474,6 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
/** The child ripple instance. */
@ViewChild(MatRipple) _ripple: MatRipple;
- /** Ripple configuration for the mouse ripples and focus indicators. */
- _rippleConfig: RippleConfig = {centered: true, radius: 23, speedFactor: 1.5};
-
/** Reference to the current focus ripple. */
private _focusRipple: RippleRef | null;
@@ -591,7 +587,7 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
/** Function is called whenever the focus changes for the input element. */
private _onInputFocusChange(focusOrigin: FocusOrigin) {
if (!this._focusRipple && focusOrigin === 'keyboard') {
- this._focusRipple = this._ripple.launch(0, 0, {persistent: true, ...this._rippleConfig});
+ this._focusRipple = this._ripple.launch(0, 0, {persistent: true});
} else if (!focusOrigin) {
if (this.radioGroup) {
this.radioGroup._touch();
diff --git a/src/lib/slide-toggle/slide-toggle.html b/src/lib/slide-toggle/slide-toggle.html
index e1c56ad44cde..cdd7b5902d28 100644
--- a/src/lib/slide-toggle/slide-toggle.html
+++ b/src/lib/slide-toggle/slide-toggle.html
@@ -25,9 +25,9 @@
+ [matRippleCentered]="true"
+ [matRippleRadius]="23"
+ [matRippleAnimation]="{enterDuration: 300}">
diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts
index b95bf06c96e3..306cdefda2e5 100644
--- a/src/lib/slide-toggle/slide-toggle.spec.ts
+++ b/src/lib/slide-toggle/slide-toggle.spec.ts
@@ -8,7 +8,7 @@ import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/f
import {MatSlideToggle, MatSlideToggleChange, MatSlideToggleModule} from './index';
import {TestGestureConfig} from '../slider/test-gesture-config';
import {dispatchFakeEvent} from '@angular/cdk/testing';
-import {RIPPLE_FADE_IN_DURATION, RIPPLE_FADE_OUT_DURATION} from '@angular/material/core';
+import {defaultRippleAnimationConfig} from '@angular/material/core';
describe('MatSlideToggle without forms', () => {
let gestureConfig: TestGestureConfig;
@@ -263,14 +263,14 @@ describe('MatSlideToggle without forms', () => {
dispatchFakeEvent(inputElement, 'keydown');
dispatchFakeEvent(inputElement, 'focus');
- tick(RIPPLE_FADE_IN_DURATION);
+ tick(defaultRippleAnimationConfig.enterDuration);
expect(slideToggleElement.querySelectorAll('.mat-ripple-element').length)
.toBe(1, 'Expected the focus ripple to be showing up.');
dispatchFakeEvent(inputElement, 'blur');
- tick(RIPPLE_FADE_OUT_DURATION);
+ tick(defaultRippleAnimationConfig.exitDuration);
expect(slideToggleElement.querySelectorAll('.mat-ripple-element').length)
.toBe(0, 'Expected focus ripple to be removed.');
diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts
index b1ed6c7ede07..3e9fe3468b7d 100644
--- a/src/lib/slide-toggle/slide-toggle.ts
+++ b/src/lib/slide-toggle/slide-toggle.ts
@@ -37,7 +37,6 @@ import {
mixinDisabled,
mixinDisableRipple,
mixinTabIndex,
- RippleConfig,
RippleRef,
} from '@angular/material/core';
@@ -142,9 +141,6 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
/** Reference to the ripple directive on the thumb container. */
@ViewChild(MatRipple) _ripple: MatRipple;
- /** Ripple configuration for the mouse ripples and focus indicators. */
- _rippleConfig: RippleConfig = {centered: true, radius: 23, speedFactor: 1.5};
-
constructor(elementRef: ElementRef,
private _platform: Platform,
private _focusMonitor: FocusMonitor,
@@ -237,7 +233,7 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
private _onInputFocusChange(focusOrigin: FocusOrigin) {
if (!this._focusRipple && focusOrigin === 'keyboard') {
// For keyboard focus show a persistent ripple as focus indicator.
- this._focusRipple = this._ripple.launch(0, 0, {persistent: true, ...this._rippleConfig});
+ this._focusRipple = this._ripple.launch(0, 0, {persistent: true});
} else if (!focusOrigin) {
this.onTouched();
diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
index 69a566aab573..53eed3aed6e7 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -239,7 +239,10 @@ export class MatTabLink extends _MatTabLinkMixinBase
this.tabIndex = parseInt(tabIndex) || 0;
if (globalOptions) {
- this.rippleConfig = {speedFactor: globalOptions.baseSpeedFactor};
+ this.rippleConfig = {
+ speedFactor: globalOptions.baseSpeedFactor,
+ animation: globalOptions.animation,
+ };
}
}