diff --git a/src/lib/core/ripple/ripple-renderer.ts b/src/lib/core/ripple/ripple-renderer.ts index 6b31dbd2473d..91d6b45d9a5b 100644 --- a/src/lib/core/ripple/ripple-renderer.ts +++ b/src/lib/core/ripple/ripple-renderer.ts @@ -101,15 +101,13 @@ export class RippleRenderer { // Exposed reference to the ripple that will be returned. let rippleRef = new RippleRef(this, ripple, config); - // Wait for the ripple element to be completely faded in. - // Once it's faded in, the ripple can be hidden immediately if the mouse is released. - this.runTimeoutOutsideZone(() => { - if (config.persistent || this._isMousedown) { - this._activeRipples.add(rippleRef); - } else { - rippleRef.fadeOut(); - } - }, duration); + if (config.persistent || this._isMousedown) { + this._activeRipples.add(rippleRef); + } else { + // Wait for the ripple element to be completely faded in. + // Once it's faded in, the ripple can be hidden immediately if the mouse is released. + this.runTimeoutOutsideZone(() => rippleRef.fadeOut(), duration); + } return rippleRef; } diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts index 71531a9abbff..246c93c19433 100644 --- a/src/lib/core/ripple/ripple.spec.ts +++ b/src/lib/core/ripple/ripple.spec.ts @@ -270,6 +270,25 @@ describe('MdRipple', () => { expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0); })); + it('should be able to remove ripples that are not done animating in', fakeAsync(() => { + expect(rippleTarget.querySelectorAll('.mat-ripple-element').length) + .toBe(0, 'Expected no ripples on init.'); + + rippleDirective.launch(0, 0, { persistent: true }); + + expect(rippleTarget.querySelectorAll('.mat-ripple-element').length) + .toBe(1, 'Expected one ripple after launch.'); + + tick(RIPPLE_FADE_IN_DURATION / 2); + + rippleDirective.fadeOutAll(); + + tick(RIPPLE_FADE_OUT_DURATION); + + expect(rippleTarget.querySelectorAll('.mat-ripple-element').length) + .toBe(0, 'Expected no ripples after fadeOutAll has been called.'); + })); + }); describe('configuring behavior', () => {