fix(ripple): use css animations for performance

Author: ajoslin

config/build.config.js

@@ -69,9 +69,8 @@ module.exports = {
 
       // Ink Components
       'src/components/animate/effects.js',
-      'src/components/animate/canvas/rippler.js',
       'src/components/animate/noEffect.js',
-      'src/components/animate/inkRipple.js',
+      'src/components/animate/inkCssRipple.js',
 
       // Components
       'src/components/buttons/buttons.js',

docs/app/index.html

@@ -25,18 +25,18 @@ <h1 class="material-toolbar-tools" style="padding-top:25px;">
 
         <button class="menu-item menu-title"
           ng-class="{active: menu.isSectionSelected(section)}"
-          ng-click="menu.toggleSelectSection(section)">
+          ng-click="menu.toggleSelectSection(section)"
+          ink-ripple>
           {{section.name}}
-          <material-ripple initial-opacity="0.4" opacity-decay-velocity="1.75"></material-ripple>
         </button>
 
         <button class="menu-item menu-sub-item"
           ng-show="menu.isSectionSelected(section)"
           ng-repeat="page in section.pages"
           ng-class="{active: menu.isPageSelected(section, page)}"
-          ng-mousedown="menu.selectPage(section, page)">
+          ng-click="menu.selectPage(section, page)"
+          ink-ripple>
           <span ng-bind="page.humanName || page.name"></span>
-          <material-ripple initial-opacity="0.4" opacity-decay-velocity="1.75"></material-ripple>
         </button>
 
       </div>
@@ -88,7 +88,7 @@ <h3 ng-bind="menu.currentPage.humanName || menu.currentPage.name || 'Angular Mat
           <span hide block-sm>View on Github</span>
           <span hide-sm>Source</span>
         </material-button>
-        <material-button ng-href="{{currentDoc.githubEditUrl}}" hide block-sm>
+        <material-button ng-href="{{currentDoc.githubEditUrl}}" hide show-sm>
           <material-icon icon="/img/icons/ic_launch_24px.svg"></material-icon>
           <span>Improve This Doc</span>
         </material-button>

src/base/_layout.scss

@@ -114,6 +114,10 @@
   display: none;
 }
 
+[show] {
+  display: inherit;
+}
+
 
 @mixin layout-presets($attr) {
   [#{$attr}] {
@@ -186,6 +190,10 @@
       display: inline-block;
     }
 
+    [show-#{$suffix}] {
+      display: inherit;
+    }
+
     [hide-#{$suffix}] {
       display: none;
     }

src/base/_mixins.scss

@@ -51,6 +51,14 @@
   -ms-user-select: $val;
   user-select: $val;
 }
+@mixin keyframes($name) {
+  @-webkit-keyframes #{$name} {
+    @content;
+  }
+  @keyframes #{$name} {
+    @content;
+  }
+}
 
 @mixin margin-selectors($before:1em, $after:1em, $start:0px, $end:0px) {
   -webkit-margin-before: $before;

src/components/animate/_effects.scss

@@ -5,12 +5,54 @@ material-ink-bar {
   margin-top: -2px;
 }
 
-canvas.material-ink-ripple {
-  pointer-events: none !important;
+// Button ripple: keep same opacity, but expand to 0.75 scale.
+// Then, fade out and expand to 2.0 scale.
+@include keyframes(inkRippleButton) {
+  0% {
+    @include transform(scale(0));
+    opacity: 0.15;
+  }
+  50% {
+    @include transform(scale(0.75));
+    opacity: 0.15;
+  }
+  100% {
+    @include transform(scale(2.0));
+    opacity: 0;
+  }
+}
+
+// Checkbox ripple: fully expand, then fade out.
+@include keyframes(inkRippleCheckbox) {
+  0% {
+    @include transform(scale(0));
+    opacity: 0.4;
+  } 
+  50% {
+    @include transform(scale(2.7));
+    opacity: 0.4;
+  }
+  100% {
+    @include transform(scale(2.7));
+    opacity: 0;
+  }
+}
+
+/*
+ * A container inside of a rippling element (eg a button),
+ * which contains all of the individual ripples
+ */
+.material-ripple-container {
+  pointer-events: none;
   position: absolute;
-  top: 0;
+  overflow: hidden;
   left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
 }
-material-tabs .material-ink-ripple {
-  color: #f0f495;
+
+.material-ripple {
+  z-index: 0;
+  position: absolute;
 }