fix(ripple): unable to remove programmatically if animations is ongoing

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;
   }

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', () => {