fix(animation): improve menu and go back swipe

src/components/menu/menu-gestures.ts

@@ -78,7 +78,7 @@ export class MenuContentGesture extends SlideEdgeGesture {
       'shouldCompleteRight', shouldCompleteRight,
       'currentStepValue', currentStepValue);
 
-    this.menu.swipeEnd(shouldCompleteLeft, shouldCompleteRight, currentStepValue);
+    this.menu.swipeEnd(shouldCompleteLeft, shouldCompleteRight, currentStepValue, velocity);
   }
 
   getElementStartPos(slide: SlideData, ev: any) {

src/components/menu/menu-types.ts

@@ -15,10 +15,18 @@ export class MenuType {
   ani: Animation = new Animation();
   isOpening: boolean;
 
+  constructor() {
+    this.ani
+      .easing('cubic-bezier(0.0, 0.0, 0.2, 1)')
+      .easingReverse('cubic-bezier(0.4, 0.0, 0.6, 1)')
+      .duration(280);
+  }
+
   setOpen(shouldOpen: boolean, animated: boolean, done: Function) {
     let ani = this.ani
       .onFinish(done, true)
       .reverse(!shouldOpen);
+
     if (animated) {
       ani.play();
     } else {
@@ -40,7 +48,7 @@ export class MenuType {
     this.ani.progressStep(stepValue);
   }
 
-  setProgressEnd(shouldComplete: boolean, currentStepValue: number, done: Function) {
+  setProgressEnd(shouldComplete: boolean, currentStepValue: number, velocity: number, done: Function) {
     let isOpen = (this.isOpening && shouldComplete);
     if (!this.isOpening && !shouldComplete) {
       isOpen = true;
@@ -51,7 +59,9 @@ export class MenuType {
       done(isOpen);
     }, true);
 
-    this.ani.progressEnd(shouldComplete, currentStepValue);
+    let dur = this.ani.getDuration() / (Math.abs(velocity) + 1);
+
+    this.ani.progressEnd(shouldComplete, currentStepValue, dur);
   }
 
   destroy() {
@@ -72,11 +82,6 @@ class MenuRevealType extends MenuType {
     super();
 
     let openedX = (menu.width() * (menu.side === 'right' ? -1 : 1)) + 'px';
-
-    this.ani
-        .easing('ease')
-        .duration(250);
-
     let contentOpen = new Animation(menu.getContentElement());
     contentOpen.fromTo('translateX', '0px', openedX);
     this.ani.add(contentOpen);
@@ -95,10 +100,6 @@ class MenuPushType extends MenuType {
   constructor(menu: Menu, platform: Platform) {
     super();
 
-    this.ani
-        .easing('ease')
-        .duration(250);
-
     let contentOpenedX: string, menuClosedX: string, menuOpenedX: string;
 
     if (menu.side === 'right') {
@@ -135,10 +136,6 @@ class MenuOverlayType extends MenuType {
   constructor(menu: Menu, platform: Platform) {
     super();
 
-    this.ani
-        .easing('ease')
-        .duration(250);
-
     let closedX: string, openedX: string;
     if (menu.side === 'right') {
       // right side

src/components/menu/menu.scss

@@ -58,6 +58,12 @@ ion-menu ion-backdrop {
   transform: translate3d(0, 0, 0);
 }
 
+.menu-content-open {
+  cursor: pointer;
+
+  touch-action: manipulation;
+}
+
 .menu-content-open ion-pane,
 .menu-content-open ion-content,
 .menu-content-open .toolbar {

src/components/menu/menu.ts

@@ -465,7 +465,7 @@ export class Menu {
   /**
    * @private
    */
-  swipeEnd(shouldCompleteLeft: boolean, shouldCompleteRight: boolean, stepValue: number) {
+  swipeEnd(shouldCompleteLeft: boolean, shouldCompleteRight: boolean, stepValue: number, velocity: number) {
     if (!this._isAnimating) {
       return;
     }
@@ -478,7 +478,7 @@ export class Menu {
       shouldComplete = (this.side === 'right') ? shouldCompleteRight : shouldCompleteLeft;
     }
 
-    this._getType().setProgressEnd(shouldComplete, stepValue, (isOpen: boolean) => {
+    this._getType().setProgressEnd(shouldComplete, stepValue, velocity, (isOpen: boolean) => {
       console.debug('menu, swipeEnd', this.side);
       this._after(isOpen);
     });
@@ -512,14 +512,9 @@ export class Menu {
 
       this._cntEle.classList.add('menu-content-open');
       let callback = this.onBackdropClick.bind(this);
-      this._events.pointerEvents({
-        element: this._cntEle,
-        pointerDown: callback
-      });
-      this._events.pointerEvents({
-        element: this.backdrop.getNativeElement(),
-        pointerDown: callback
-      });
+      this._events.listen(this._cntEle, 'click', callback, true);
+      this._events.listen(this.backdrop.getNativeElement(), 'click', callback, true);
+
       this.ionOpen.emit(true);
 
     } else {