perf(activator): cancelled touch does not cause layout thrashing

Author: manucorporat

src/components/tap-click/activator-base.ts

@@ -8,7 +8,7 @@ export abstract class ActivatorBase {
 
   abstract upAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: PointerCoordinates);
 
-  abstract clearState();
+  abstract clearState(animated: boolean);
 }
 
 export function isActivatedDisabled(ev: any, activatableEle: any): boolean {

src/components/tap-click/activator.ts

@@ -42,7 +42,7 @@ export class Activator implements ActivatorBase {
     }
 
     this.unscheduleClear();
-    this.deactivate();
+    this.deactivate(true);
 
     // queue to have this element activated
     this._queue.push(activatableEle);
@@ -69,7 +69,7 @@ export class Activator implements ActivatorBase {
       return;
     }
     this._clearRafDefer = rafFrames(this.clearDelay, () => {
-      this.clearState();
+      this.clearState(true);
       this._clearRafDefer = null;
     });
   }
@@ -82,29 +82,36 @@ export class Activator implements ActivatorBase {
   }
 
   // all states should return to normal
-  clearState() {
+  clearState(animated: boolean) {
     if (!this.app.isEnabled()) {
       // the app is actively disabled, so don't bother deactivating anything.
       // this makes it easier on the GPU so it doesn't have to redraw any
       // buttons during a transition. This will retry in XX milliseconds.
       nativeTimeout(() => {
-        this.clearState();
+        this.clearState(animated);
       }, 600);
 
     } else {
       // not actively transitioning, good to deactivate any elements
-      this.deactivate();
+      this.deactivate(animated);
     }
   }
 
   // remove the active class from all active elements
-  deactivate() {
+  deactivate(animated: boolean) {
     this._clearDeferred();
 
     this._queue.length = 0;
 
+    let ele;
     for (var i = 0; i < this._active.length; i++) {
-      this._active[i].classList.remove(this._css);
+      ele = this._active[i];
+      if (!animated) {
+        ele.style.transition = 'none';
+      } else {
+        ele.style.transition = '';
+      }
+      ele.classList.remove(this._css);
     }
     this._active.length = 0;
   }

src/components/tap-click/ripple.ts

@@ -41,9 +41,9 @@ export class RippleActivator implements ActivatorBase {
     this._upAction(ev, activatableEle, startCoord);
   }
 
-  clearState() {
+  clearState(animated: boolean) {
     // Highlight
-    this.highlight && this.highlight.clearState();
+    this.highlight && this.highlight.clearState(animated);
   }
 
   _downAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: PointerCoordinates) {

src/components/tap-click/tap-click.ts

@@ -109,7 +109,7 @@ export class TapClick {
 
     this.startCoord = null;
     this.dispatchClick = false;
-    this.activator && this.activator.clearState();
+    this.activator && this.activator.clearState(false);
     this.pointerEvents.stop();
   }