bug: router transition animation not applied when using browser back button

[hoi4]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When using the browser back button, the page transition animation is not played.

Regarding the attached video: I just added an "about" page to the tabs starter project. The hard cut between the "about" page and the tab1 is me pressing the browser back button.

Screen.Recording.2023-09-14.at.19.24.39.mov

Expected Behavior

I would expect animations to work when using the browser back button

Steps to Reproduce

1. Open tab1 and click the button to route to the "about" page
2. Click the browser back button

Code Reproduction URL

https://github.com/hoi4/ionic-animation-test

Ionic Info

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : 7.4.0
   @angular-devkit/build-angular : 16.2.2
   @angular-devkit/schematics    : 16.2.2
   @angular/cli                  : 16.2.2
   @ionic/angular-toolkit        : 9.0.0

System:

   NodeJS : v18.17.1 (/Users/philipp/.nvm/versions/node/v18.17.1/bin/node)
   npm    : 9.6.7
   OS     : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #16569.

[hoi4]

@liamdebeasi Do I understand correctly that this issue will never be tackled? We are trying to build a mobile-like experience for our web app where this would come in very handy. Is it a technical limitation?

[hoi4]

For future reference:

Based on #16569 I found a workaround using Angular's CanDeactivate guard.

const canDeactivateFn: CanDeactivateFn<any> = (
  _component: any,
  _currentRoute: ActivatedRouteSnapshot,
  currentState: RouterStateSnapshot,
  nextState: RouterStateSnapshot,
): boolean => {
  const previousUrl = currentState.url;
  const nextUrl = nextState.url;

  inject(NavController).setDirection(previousUrl.includes(nextUrl) ? 'back' : 'forward');

  return true;
};

The key is to call navController.setDirection.

[liamdebeasi]

Do I understand correctly that this issue will never be tackled? We are trying to build a mobile-like experience for our web app where this would come in very handy. Is it a technical limitation?

It's a bug in our navigation implementation rather than an intentional design. We are working through a large backlog of tasks which means some items may take longer than others to fix, though we do plan to fix this.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.