From bc800df47d97154c60eb40786556823322f2fd4e Mon Sep 17 00:00:00 2001
From: Joel <waylaidwanderer@live.com>
Date: Sun, 28 Sep 2014 14:34:19 -0700
Subject: [PATCH] Improved animation timing for ripples to more closely match
 the original

---
 css-compiled/ripples.css | 16 ++++++++++------
 less/ripples.less        | 20 ++++++++++++--------
 scripts/ripples.js       |  2 +-
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/css-compiled/ripples.css b/css-compiled/ripples.css
index a3c19300..05124b30 100644
--- a/css-compiled/ripples.css
+++ b/css-compiled/ripples.css
@@ -29,14 +29,18 @@
   opacity: 0;
 }
 .ripple.ripple-on {
-  -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-  -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-  -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-  transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
+  visibility: visible;
   opacity: 1;
+  -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
+  -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
+  -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
+  transition: opacity 0.15s ease-in 0s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
 }
 .ripple.ripple-out {
-  -webkit-transition: opacity 0.1s linear 0s !important;
-  transition: opacity 0.1s linear 0s !important;
+  visibility: hidden;
   opacity: 0;
+  -webkit-transition: visibility 0s 0.1s, opacity 0.1s linear !important;
+  -ms-transition: opacity 0s 0.1s, opacity 0.1s linear !important;
+  -moz-transition: visibility 0s 0.1s, opacity 0.1s linear !important;
+  transition: visibility 0s 0.1s, opacity 0.1s linear !important;
 }
diff --git a/less/ripples.less b/less/ripples.less
index 5f22f1d7..cda32706 100644
--- a/less/ripples.less
+++ b/less/ripples.less
@@ -30,14 +30,18 @@
     opacity: 0;
 }
 .ripple.ripple-on {
-    -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-    -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-    -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-    opacity: 1;
+	visibility: visible;
+	opacity: 1;
+    -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
+    -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
+    -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
+    transition: opacity 0.15s ease-in 0s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;    
 }
 .ripple.ripple-out {
-    -webkit-transition: opacity 0.1s linear 0s !important;
-    transition: opacity 0.1s linear 0s !important;
-    opacity: 0;
+	visibility: hidden;
+	opacity: 0;
+	-webkit-transition: visibility 0s 0.1s, opacity 0.1s linear !important;
+	-ms-transition: opacity 0s 0.1s, opacity 0.1s linear !important;
+    -moz-transition: visibility 0s 0.1s, opacity 0.1s linear !important;
+    transition: visibility 0s 0.1s, opacity 0.1s linear !important;    
 }
diff --git a/scripts/ripples.js b/scripts/ripples.js
index 805040a2..80e33c7b 100644
--- a/scripts/ripples.js
+++ b/scripts/ripples.js
@@ -12,7 +12,7 @@ var ripples = {
 
         // animations time
         var rippleOutTime = 100,
-            rippleStartTime = 500;
+            rippleStartTime = 400;
 
         // Helper to bind events on dynamically created elements
         var bind = function(event, selector, callback) {