perf(menu): improves menu performance and fixes some edge cases

src/animations/animation.ts

@@ -504,12 +504,14 @@ export class Animation {
 
       // set the after styles
       // ******** DOM WRITE ****************
-      self._playEnd(1);
+      self._playEnd(shouldComplete ? 1 : 0);
 
       // transition finished
       self._didFinishAll(shouldComplete, true, false);
     }
 
+    assert(dur > 0, 'duration can not be 0 in async animations');
+
     // set the TRANSITION END event on one of the transition elements
     self._unrgTrns = transitionEnd(self._transEl(), onTransitionEnd);
 
@@ -641,6 +643,8 @@ export class Animation {
         var fromNum = fx.from.num;
         var toNum = fx.to.num;
         var tweenEffect = (fromNum !== toNum);
+
+        assert(tweenEffect || !this._isAsync, 'in async animations to != from value');
         if (tweenEffect) {
           this._twn = true;
         }
@@ -655,7 +659,12 @@ export class Animation {
 
         } else if (tweenEffect) {
           // EVERYTHING IN BETWEEN
-          val = (((toNum - fromNum) * stepValue) + fromNum) + fx.to.unit;
+          var valNum = (((toNum - fromNum) * stepValue) + fromNum);
+          var unit = fx.to.unit;
+          if (unit === 'px') {
+            valNum = Math.round(valNum);
+          }
+          val = valNum + unit;
         }
 
         if (val !== null) {
@@ -1011,11 +1020,20 @@ export class Animation {
   progressEnd(shouldComplete: boolean, currentStepValue: number, dur: number = -1) {
     console.debug('Animation, progressEnd, shouldComplete', shouldComplete, 'currentStepValue', currentStepValue);
 
+    if (this._rv) {
+      // if the animation is going in reverse then
+      // flip the step value: 0 becomes 1, 1 becomes 0
+      currentStepValue = ((currentStepValue * -1) + 1);
+    }
     const stepValue = shouldComplete ? 1 : 0;
 
-    if (dur < 0) {
+    const diff = Math.abs(currentStepValue - stepValue);
+    if (diff < 0.05) {
+      dur = 0;
+    } else if (dur < 0) {
       dur = this._dur;
     }
+
     this._isAsync = (dur > 30);
 
     this._progressEnd(shouldComplete, stepValue, dur, this._isAsync);

src/components/menu/menu-gestures.ts

@@ -47,6 +47,11 @@ export class MenuContentGesture extends SlideEdgeGesture {
   // Set CSS, then wait one frame for it to apply before sliding starts
   onSlideBeforeStart(ev: any) {
     console.debug('menu gesture, onSlideBeforeStart', this.menu.side);
+    this.menu.swipeBeforeStart();
+  }
+
+  onSlideStart() {
+    console.debug('menu gesture, onSlideStart', this.menu.side);
     this.menu.swipeStart();
   }
 

src/components/menu/menu.ts

@@ -435,15 +435,27 @@ export class Menu {
       this._app.isEnabled();
   }
 
+  /**
+   * @private
+   */
+  swipeBeforeStart() {
+    if (!this.canSwipe()) {
+      assert(false, 'canSwipe() has to be true');
+      return;
+    }
+    this._before();
+  }
+
   /**
    * @private
    */
   swipeStart() {
-    // user started swiping the menu open/close
-    if (this.canSwipe()) {
-      this._before();
-      this._getType().setProgressStart(this.isOpen);
+    // user actively dragging the menu
+    if (!this._isAnimating) {
+      assert(false, '_isAnimating has to be true');
+      return;
     }
+    this._getType().setProgressStart(this.isOpen);
   }
 
   /**
@@ -452,6 +464,7 @@ export class Menu {
   swipeProgress(stepValue: number) {
     // user actively dragging the menu
     if (!this._isAnimating) {
+      assert(false, '_isAnimating has to be true');
       return;
     }
     this._getType().setProgessStep(stepValue);

src/components/toolbar/toolbar.ios.scss

@@ -80,11 +80,12 @@ $navbar-ios-height:                         $toolbar-ios-height !default;
 }
 
 .toolbar-title-ios {
+  margin-top: 1px;
+
   font-size: $toolbar-ios-title-font-size;
   font-weight: $toolbar-ios-title-font-weight;
   text-align: $toolbar-ios-title-text-align;
   color: $toolbar-ios-title-text-color;
-  margin-top: 1px;
 
   pointer-events: auto;
 }

src/gestures/drag-gesture.ts

@@ -1,4 +1,4 @@
-import { defaults } from '../util/util';
+import { defaults, assert } from '../util/util';
 import { GestureDelegate } from '../gestures/gesture-controller';
 import { PanRecognizer } from './recognizers';
 import { PointerEvents, PointerEventsConfig, UIEventManager } from '../util/ui-event-manager';
@@ -26,7 +26,7 @@ export class PanGesture {
   private events: UIEventManager = new UIEventManager(false);
   private pointerEvents: PointerEvents;
   private detector: PanRecognizer;
-  private started: boolean = false;
+  protected started: boolean = false;
   private captured: boolean = false;
   public isListening: boolean = false;
   protected gestute: GestureDelegate;
@@ -106,10 +106,10 @@ export class PanGesture {
   }
 
   pointerMove(ev: any) {
+    if (!this.started) {
+      return;
+    }
     this.debouncer.debounce(() => {
-      if (!this.started) {
-        return;
-      }
       if (this.captured) {
         this.onDragMove(ev);
         return;
@@ -134,11 +134,9 @@ export class PanGesture {
   }
 
   pointerUp(ev: any) {
+    assert(this.started, 'started failed');
     this.debouncer.cancel();
 
-    if (!this.started) {
-      return;
-    }
     this.gestute && this.gestute.release();
 
     if (this.captured) {

src/gestures/slide-gesture.ts

@@ -1,6 +1,6 @@
 import { PanGesture } from './drag-gesture';
-import { clamp } from '../util/util';
-import { pointerCoord } from '../util/dom';
+import { clamp, assert } from '../util/util';
+import { nativeRaf, pointerCoord } from '../util/dom';
 
 /**
  * @private
@@ -49,16 +49,21 @@ export class SlideGesture extends PanGesture {
       distance: 0,
       velocity: 0,
     };
-    let {min, max} = this.getSlideBoundaries(this.slide, ev);
-    this.slide.min = min;
-    this.slide.max = max;
-    this.slide.elementStartPos = this.getElementStartPos(this.slide, ev);
-
-    this.onSlideStart(this.slide, ev);
+    this.started = false;
+    nativeRaf(() => {
+      let {min, max} = this.getSlideBoundaries(this.slide, ev);
+      this.slide.min = min;
+      this.slide.max = max;
+      this.slide.elementStartPos = this.getElementStartPos(this.slide, ev);
+      this.started = true;
+      this.onSlideStart(this.slide, ev);
+    });
   }
 
   onDragMove(ev: any) {
     let slide: SlideData = this.slide;
+    assert(slide.min !== slide.max, 'slide data must be properly initialized');
+
     let coord = <any>pointerCoord(ev);
     let newPos = coord[this.direction];
     let newTimestamp = Date.now();
@@ -74,8 +79,6 @@ export class SlideGesture extends PanGesture {
     slide.velocity = velocity;
     slide.delta = newPos - slide.pointerStartPos;
     this.onSlide(slide, ev);
-
-    return true;
   }
 
   onDragEnd(ev: any) {

src/themes/ionic.theme.dark.ios.scss

@@ -34,7 +34,7 @@ $item-ios-note-color:                  #f4f4f4 !default;
 // --------------------------------------------------
 
 $toolbar-ios-background:               $toolbar-background !default;
-$toolbar-ios-border-color:             rgba(255, 255, 255, 0.1) !default;
+$toolbar-ios-border-color:             rgba(255, 255, 255, .1) !default;
 $toolbar-ios-text-color:               $toolbar-text-color !default;
 $toolbar-ios-active-color:             $toolbar-active-color !default;
 $toolbar-ios-inactive-color:           $toolbar-inactive-color !default;

src/transitions/page-transition.ts

@@ -1,5 +1,4 @@
 import { Animation } from '../animations/animation';
-import { Content } from '../components/content/content';
 import { Transition } from './transition';
 
 
@@ -24,7 +23,7 @@ export class PageTransition extends Transition {
    * DOM READ
    */
   readDimensions() {
-    const content = <Content>this.enteringView.getIONContent();
+    const content = this.enteringView.getIONContent();
     if (content) {
       content.readDimensions();
     }
@@ -34,7 +33,7 @@ export class PageTransition extends Transition {
    * DOM WRITE
    */
   writeDimensions() {
-    const content = <Content>this.enteringView.getIONContent();
+    const content = this.enteringView.getIONContent();
     if (content) {
       content.writeDimensions();
     }