Also remove the ripple when transition is ended

Author: tinayuangao

src/lib/core/ripple/ripple-renderer.ts

@@ -155,7 +155,9 @@ export class RippleRenderer {
 
   /** Removes a foreground ripple from the DOM after it has faded out. */
   removeRippleFromDom(ripple: Element) {
-    ripple.parentElement.removeChild(ripple);
+    if (ripple && ripple.parentElement) {
+      ripple.parentElement.removeChild(ripple);
+    }
   }
 
   /** Fades in the ripple background. */

src/lib/core/ripple/ripple.spec.ts

@@ -1,4 +1,4 @@
-import {TestBed, ComponentFixture} from '@angular/core/testing';
+import {TestBed, ComponentFixture, fakeAsync, tick} from '@angular/core/testing';
 import {Component, ViewChild} from '@angular/core';
 import {MdRipple, MdRippleModule} from './ripple';
 
@@ -128,6 +128,14 @@ describe('MdRipple', () => {
       expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(0);
     });
 
+    it('removes foreground ripples after timeout', fakeAsync(() => {
+      rippleElement.click();
+      expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(1);
+
+      tick(100);
+      expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(0);
+    }));
+
     it('creates ripples when manually triggered', () => {
       const rippleComponent = fixture.debugElement.componentInstance.ripple;
       // start() should show the background, but no foreground ripple yet.

src/lib/core/ripple/ripple.ts

@@ -134,6 +134,7 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges {
           ripple.state = ForegroundRippleState.FADING_OUT;
           break;
         case ForegroundRippleState.FADING_OUT:
+          this._rippleRenderer.removeRippleFromDom(ripple.rippleElement);
           break;
       }
     }