search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.15k stars 13.5k forks source link

bug: angular, no animations when navigating to non-tabs page that shares a tabs page path #20386

Open simetin opened 4 years ago

simetin commented 4 years ago

Hi !

Bug Report

Ionic version: [x] 5.x

Current behavior: There is no navigation animation when you navigate to a page that is not a child of one of the tabs. Example going from /tabs/home to /tabs/items/itemID

Also You cannot swipe back when there is no animation.

Here is a screen recording of the problem: https://youtu.be/Eq7LfXoZL2A

I have create a repo illustrating the issue. https://github.com/simetin/ionic-tabs-nav.

Expected behavior: I get that I could just do example /tabs/home/items/itemID, however with an app bigger than a couple of pages and that has a lot of links between different type of items (think for example of Instagram), it become infeasible.

Steps to reproduce: Run the provided Github repo

Related code: https://github.com/simetin/ionic-tabs-nav

Ionic info:


Ionic:

   Ionic CLI                     : 6.0.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.0-rc.2
   @angular-devkit/build-angular : 0.900.0-rc.14
   @angular-devkit/schematics    : 9.0.0-rc.14
   @angular/cli                  : 9.0.0-rc.14
   @ionic/angular-toolkit        : 2.1.1

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   NodeJS : v12.14.1 (/usr/local/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina```

Thank you for looking into this issue !
chris-cornwall commented 4 years ago

Is there any update on this? I'm facing the same issue

jumamfa commented 4 years ago

Same issue, I've tried a bunch of options including trying to tie into the navAnimation config, but it's not triggered by top level tab changes. Also tried an approach to use segments instead of tabs however I'd then need to add it to all pages as an item within ion-content as putting them outside of the ion-router doesn't work etc...

simetin commented 4 years ago

My solution ended up being declaring the routing in each page module. So the routes of every links in home.page.html / home.page.ts will be in home.page.module.ts

chris-cornwall commented 4 years ago

I'm not sure I get you. Do you mean that if I have a button which, when clicked, routes to '/foo/bar/' somewhere in home.page.html I would need to include this '/foo/bar' route in home.page.module.ts?

KirstenStake commented 3 years ago

@liamdebeasi please look into making this happen. struggling with the same issue.

at first was able to use the deprecated plugin native page transitions but this now causes a glitch bug on Android in Capacitor 3 and it was risky to begin with using a deprecated plugin so we have removed this from the code base.

Our use case is that we have a "hidden" tab where we do full journeys where we do not want the tab bar to show. however without animation our code which hides the tabbar after NavigationEnd is visible for a split second depending on device.

declaring each routing module in each tab is not maintainable and an option for our large codebase.

@chris-cornwall @simetin @jumamfa i have read previously that if an issue's original comment get's lots of thumbs up it helps with the triage process. worth a shot!

simetin commented 3 years ago

@KirstenStake You only need to declare the next page possible in each page routing module, not every possibilities !

KirstenStake commented 3 years ago

@simetin that is what I'm doing. I declare it in the appropriate places, but due to the complexity of our app it still makes it hard to maintain. Regardless, navigation for tab roots is definitely a feature which would be gratefully welcomed.

simetin commented 3 years ago

Yeah definitely !

liamdebeasi commented 2 years ago

Thanks for the issue and apologies for the delay. I can reproduce this behavior. The problem is that Ionic Angular stores the prefix for a tabs path and uses this to determine if a view is a tab or not: https://github.com/ionic-team/ionic-framework/blob/main/angular/src/directives/navigation/ion-router-outlet.ts#L54

Ionic Angular assumes that only tabbed pages will use this prefix. The affected page in https://github.com/ionic-team/ionic-framework/issues/20386#issue-560520145 shares the same route prefix as tabbed pages. As a result, the affected page is considered a tab itself. Tab switches do not have animations, so routing to this page causes the animation to get disabled.

As a workaround, ensuring that tab and non-tab pages do not share path prefixes should fix the issue.