perf(itemSliding): improve performance

ionic/components/item/item-sliding-gesture.ts

@@ -20,14 +20,14 @@ export class ItemSlidingGesture extends DragGesture {
     this.canDrag = true;
     this.listen();
 
-    this.on('tap', ev => {
+    this.tap = (ev) => {
       if (!isFromOptionButtons(ev.target)) {
         let didClose = this.closeOpened();
         if (didClose) {
           preventDefault(ev);
         }
       }
-    });
+    };
 
     this.mouseOut = (ev) => {
       this.onDragEnd(ev);
@@ -38,14 +38,14 @@ export class ItemSlidingGesture extends DragGesture {
     let itemContainerEle = getItemConatiner(ev.target);
     if (!itemContainerEle) return;
 
-    this.closeOpened(ev, itemContainerEle);
+    this.closeOpened(itemContainerEle);
 
     let openAmout = this.getOpenAmount(itemContainerEle);
     let itemData = this.get(itemContainerEle);
     this.preventDrag = (openAmout > 0);
 
     if (this.preventDrag) {
-      this.closeOpened(ev);
+      this.closeOpened();
       return preventDefault(ev);
     }
 
@@ -57,16 +57,18 @@ export class ItemSlidingGesture extends DragGesture {
     if (ev.srcEvent.type.indexOf('mouse') > -1) {
       ev.target.addEventListener('mouseout', this.mouseOut);
     }
+
+    this.dragEnded = false;
   }
 
   onDrag(ev) {
-    if (Math.abs(ev.deltaY) > 30) {
+    if (this.dragEnded || this.preventDrag || Math.abs(ev.deltaY) > 30) {
       this.preventDrag = true;
-      return this.closeOpened(ev);
+      return;
     }
 
     let itemContainerEle = getItemConatiner(ev.target);
-    if (!itemContainerEle || !isActive(itemContainerEle) || this.preventDrag) return;
+    if (!itemContainerEle || !isActive(itemContainerEle)) return;
 
     let itemData = this.get(itemContainerEle);
 
@@ -75,9 +77,6 @@ export class ItemSlidingGesture extends DragGesture {
       if (!itemData.optsWidth) return;
     }
 
-    itemContainerEle.classList.add('active-slide');
-    itemContainerEle.classList.add('active-options');
-
     let x = ev.center[this.direction];
     let delta = x - itemData.startX;
 
@@ -88,11 +87,18 @@ export class ItemSlidingGesture extends DragGesture {
       newX = -Math.min(-itemData.optsWidth, -itemData.optsWidth + (((delta + itemData.optsWidth) * 0.4)));
     }
 
-    this.open(itemContainerEle, newX, false);
+    raf(() => {
+      if (!this.dragEnded && !this.preventDrag) {
+        isItemActive(itemContainerEle, true);
+        this.open(itemContainerEle, newX, false);
+      }
+    });
   }
 
   onDragEnd(ev) {
     this.preventDrag = false;
+    this.dragEnded = true;
+
     let itemContainerEle = getItemConatiner(ev.target);
     if (!itemContainerEle || !isActive(itemContainerEle)) return;
 
@@ -108,12 +114,7 @@ export class ItemSlidingGesture extends DragGesture {
     if (this.getOpenAmount(itemContainerEle) < (restingPoint / 2)) {
 
       // If we are going left but too slow, or going right, go back to resting
-      if (ev.direction & Hammer.DIRECTION_RIGHT) {
-        // Left
-        restingPoint = 0;
-
-      } else if (Math.abs(ev.velocityX) < 0.3) {
-        // Right
+      if (ev.direction & Hammer.DIRECTION_RIGHT || Math.abs(ev.velocityX) < 0.3) {
         restingPoint = 0;
       }
     }
@@ -125,7 +126,7 @@ export class ItemSlidingGesture extends DragGesture {
     });
   }
 
-  closeOpened(ev, doNotCloseEle) {
+  closeOpened(doNotCloseEle) {
     let didClose = false;
     if (this.openItems) {
       let openItemElements = this.listEle.querySelectorAll('.active-slide');
@@ -153,8 +154,7 @@ export class ItemSlidingGesture extends DragGesture {
     } else {
       let timerId = setTimeout(() => {
         if (slidingEle.style[CSS.transform] === '') {
-          itemContainerEle.classList.remove('active-slide');
-          itemContainerEle.classList.remove('active-options');
+          isItemActive(itemContainerEle, false);
           this.openItems--;
         }
       }, 400);
@@ -165,6 +165,12 @@ export class ItemSlidingGesture extends DragGesture {
     slidingEle.style[CSS.transform] = (openAmount ? 'translate3d(' + -openAmount + 'px,0,0)' : '');
 
     if (isFinal) {
+      if (openAmount) {
+        isItemActive(itemContainerEle, true);
+        this.on('tap', this.tap);
+      } else {
+        this.off('tap', this.tap);
+      }
       this.enableScroll(!openAmount);
     }
   }
@@ -197,6 +203,11 @@ export class ItemSlidingGesture extends DragGesture {
   }
 }
 
+function isItemActive(ele, isActive) {
+  ele.classList[isActive ? 'add' : 'remove']('active-slide');
+  ele.classList[isActive ? 'add' : 'remove']('active-options');
+}
+
 function preventDefault(ev) {
   ev.preventDefault();
 }

ionic/components/item/item-sliding.scss

@@ -21,7 +21,7 @@ ion-item-options {
   right: 0;
   z-index: $z-index-item-options;
   height: 100%;
-  opacity: 0;
+  visibility: hidden;
 }
 
 ion-item-sliding.active-slide {
@@ -39,7 +39,7 @@ ion-item-sliding.active-slide {
     display: flex;
   }
 
-  &.active-options ion-item-options{
-    opacity: 1;
+  &.active-options ion-item-options {
+    visibility: visible;
   }
 }

ionic/components/item/test/sliding/main.html

@@ -83,9 +83,9 @@
       </ion-item-options>
     </ion-item-sliding>
 
-    <ion-item-sliding *ng-for="#item of getItems()">
+    <ion-item-sliding *ng-for="#data of getItems()" #item>
       <ion-item text-wrap detail-push>
-        <h3>ng-for {{item}}</h3>
+        <h3>ng-for {{data}}</h3>
       </ion-item>
       <ion-item-options>
         <button primary (click)="archive($event, item)">Archive</button>