trying something else

Author: liamdebeasi

core/src/components/router-outlet/route-outlet.tsx

@@ -20,7 +20,6 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
   private gesture?: Gesture;
   private ani?: Animation;
   private animationEnabled = true;
-  private isTransitioning = false;
 
   @Element() el!: HTMLElement;
 
@@ -64,7 +63,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
   async connectedCallback() {
     this.gesture = (await import('../../utils/gesture/swipe-back')).createSwipeBackGesture(
       this.el,
-      () => !this.isTransitioning && !!this.swipeHandler && this.swipeHandler.canStart() && this.animationEnabled,
+      () => !!this.swipeHandler && this.swipeHandler.canStart() && this.animationEnabled,
       () => this.swipeHandler && this.swipeHandler.onStart(),
       step => this.ani && this.ani.progressStep(step),
       (shouldComplete, step, dur) => {
@@ -185,8 +184,6 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
     const animated = this.animated && config.getBoolean('animated', true);
     const animationBuilder = this.animation || opts.animationBuilder || config.get('navAnimation');
 
-    this.isTransitioning = true;
-
     await transition({
       mode,
       animated,
@@ -201,8 +198,6 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
       animationBuilder,
     });
 
-    this.isTransitioning = false;
-
     // emit nav changed event
     this.ionNavDidChange.emit();
 

core/src/utils/transition/ios.transition.ts

@@ -233,7 +233,22 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
       .duration(opts.duration || DURATION)
       .easing(opts.easing || EASING)
       .fill('both')
-      .beforeRemoveClass('ion-page-invisible');
+      .beforeRemoveClass('ion-page-invisible')
+      .beforeAddWrite(() => {
+        /**
+         * When transitioning, the page should not
+         * respond to click events. This resolves small
+         * issues like users trying to swipe to
+         * go back while the page is transitioning in and
+         * when double tapping the ion-back-button.
+         */
+        enteringEl.style.setProperty('pointer-events', 'none');
+        leavingEl.style.setProperty('pointer-events', 'none');
+      })
+      .afterAddWrite(() => {
+        enteringEl.style.removeProperty('pointer-events');
+        leavingEl.style.removeProperty('pointer-events');
+      });
 
     if (leavingEl && navEl) {
       const navDecorAnimation = createAnimation();

core/src/utils/transition/md.transition.ts

@@ -17,7 +17,22 @@ export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions):
   rootTransition
     .addElement(ionPageElement)
     .fill('both')
-    .beforeRemoveClass('ion-page-invisible');
+    .beforeRemoveClass('ion-page-invisible')
+    .beforeAddWrite(() => {
+      /**
+       * When transitioning, the page should not
+       * respond to click events. This resolves small
+       * issues like users trying to swipe to
+       * go back while the page is transitioning in and
+       * when double tapping the ion-back-button.
+       */
+      enteringEl.style.setProperty('pointer-events', 'none');
+      leavingEl.style.setProperty('pointer-events', 'none');
+    })
+    .afterAddWrite(() => {
+      enteringEl.style.removeProperty('pointer-events');
+      leavingEl.style.removeProperty('pointer-events');
+    });
 
   // animate the component itself
   if (backDirection) {