feat(ripple): list item md ripple

ionic/components/item/item.scss

@@ -15,6 +15,7 @@
   border: 0;
   min-height: 4.4rem;
   text-align: initial;
+  overflow: hidden;
 
   background-color: $list-background-color;
   color: $list-text-color;

ionic/components/item/modes/md.scss

@@ -189,3 +189,9 @@ $item-md-forward-icon-color:          $item-md-border-color !default;
   }
 
 }
+
+.item,
+a.item,
+button.item {
+  transition: background-color $button-md-transition-duration $button-md-animation-curve,
+}

ionic/components/tap-click/activator.ts

@@ -5,6 +5,7 @@ export class Activator {
 
   constructor(app, config) {
     this.app = app;
+    this.queue = [];
     this.active = [];
     this.clearStateTimeout = 180;
     this.clearAttempt = 0;
@@ -20,9 +21,20 @@ export class Activator {
     this.x = pointerX;
     this.y = pointerY;
 
-    // remember this is the active element
-    targetEle.classList.add(this.activatedClass);
+    // queue to have this element activated
+    this.queue.push(targetEle);
+
+    raf(() => {
+      let targetEle;
+      for (let i = 0; i < this.queue.length; i++) {
+        targetEle = this.queue[i];
+        if (targetEle && targetEle.parentNode) {
           this.active.push(targetEle);
+          targetEle.classList.add(this.activatedClass);
+        }
+      }
+      this.queue = [];
+    });
   }
 
   upAction() {
@@ -54,6 +66,7 @@ export class Activator {
     for (let i = 0; i < this.active.length; i++) {
       this.active[i].classList.remove(this.activatedClass);
     }
+    this.queue = [];
     this.active = [];
   }
 

ionic/components/tap-click/ripple.scss

@@ -18,3 +18,7 @@ md-ripple {
 
   transform: scale(0.001) translateZ(0);
 }
+
+.item > md-ripple {
+  z-index: 0;
+}