Use different curves for opacity and transform

Author: willshowell

src/lib/core/ripple/_ripple.scss

@@ -24,7 +24,8 @@ $mat-ripple-color-opacity: 0.1;
     border-radius: 50%;
     pointer-events: none;
 
-    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
+    transition: opacity 0ms cubic-bezier(0.4, 0.0, 1, 1),
+                transform 0ms cubic-bezier(0, 0, 0.2, 1);
     transform: scale(0);
   }
 }

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

@@ -191,9 +191,9 @@ export class RippleRenderer {
 
     this._isMousedown = false;
 
-    // Fade-out all ripples that are not persistent.
+    // Fade-out all ripples that are completely visible and not persistent.
     this._activeRipples.forEach(ripple => {
-      if (!ripple.config.persistent) {
+      if (!ripple.config.persistent && ripple.state === RippleState.VISIBLE) {
         ripple.fadeOut();
       }
     });