From 110ebe091979914c6ac34c4ae2e300002037d8af Mon Sep 17 00:00:00 2001 From: Will Howell Date: Thu, 28 Sep 2017 16:36:42 -0400 Subject: [PATCH 1/2] style(ripple): start animation out on mouseup --- src/lib/core/ripple/ripple-renderer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/core/ripple/ripple-renderer.ts b/src/lib/core/ripple/ripple-renderer.ts index bb5f61aafd0e..2280e0c934cd 100644 --- a/src/lib/core/ripple/ripple-renderer.ts +++ b/src/lib/core/ripple/ripple-renderer.ts @@ -191,9 +191,9 @@ export class RippleRenderer { this._isMousedown = false; - // Fade-out all ripples that are completely visible and not persistent. + // Fade-out all ripples that are not persistent. this._activeRipples.forEach(ripple => { - if (!ripple.config.persistent && ripple.state === RippleState.VISIBLE) { + if (!ripple.config.persistent) { ripple.fadeOut(); } }); From 0a493b8e2c0b4e0fad144c5a9eef369269bbd651 Mon Sep 17 00:00:00 2001 From: Will Howell Date: Thu, 9 Nov 2017 11:44:47 -0500 Subject: [PATCH 2/2] Use different curves for opacity and transform --- src/lib/core/ripple/_ripple.scss | 3 ++- src/lib/core/ripple/ripple-renderer.ts | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/lib/core/ripple/_ripple.scss b/src/lib/core/ripple/_ripple.scss index 6c03b9ae0980..5bebe2086f80 100644 --- a/src/lib/core/ripple/_ripple.scss +++ b/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); } } diff --git a/src/lib/core/ripple/ripple-renderer.ts b/src/lib/core/ripple/ripple-renderer.ts index 2280e0c934cd..bb5f61aafd0e 100644 --- a/src/lib/core/ripple/ripple-renderer.ts +++ b/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(); } });