diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 6bcbe040fd..37668d4c78 100644 --- a/ionic/components/item/item.scss +++ b/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; diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index d83645ac55..f036a2b1c6 100644 --- a/ionic/components/item/modes/md.scss +++ b/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, +} diff --git a/ionic/components/tap-click/activator.ts b/ionic/components/tap-click/activator.ts index eaaba385ff..0b6f4093a7 100644 --- a/ionic/components/tap-click/activator.ts +++ b/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); - this.active.push(targetEle); + // 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 = []; } diff --git a/ionic/components/tap-click/ripple.scss b/ionic/components/tap-click/ripple.scss index 2f212411ec..06f9d84b35 100644 --- a/ionic/components/tap-click/ripple.scss +++ b/ionic/components/tap-click/ripple.scss @@ -18,3 +18,7 @@ md-ripple { transform: scale(0.001) translateZ(0); } + +.item > md-ripple { + z-index: 0; +}