bug: ios transition uses shared toolbar transition even when only 1 view has toolbars

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

- [ ] v4.x
- [ ] v5.x
- [X] v6.x
- [ ] v7.x
- [ ] Nightly

### Current Behavior

I am using a ion-router-outlet with "animated=true". When navigating between two components, the transition animation is behaving strangely:
1. The ion-header & ion-footer appear before the the transition animation (when navigating from component A to component B).
2. The ion-header & ion-footer disappear after the transition animation visually completes (when navigating backwards, from component B back to component A).

Both of these effects can be seen in this short video. Pay attention to the red background, which appears & disappears out of sync with the animation:

https://user-images.githubusercontent.com/41165256/216829355-4014d249-f25b-4c9a-8ff6-0e8c97390fa1.mov

### Expected Behavior

The ion-header & footer should both appear and disappear in sync with the animation between components.

### Steps to Reproduce

1. Pull the reproduction repo & install the deps, then:
a. run `npx ng serve app --port 4200 --host localhost `
b. navigate to localhost:4200/home/tab
c. click on the 'Page link' button
d. click on the "Back" button

.... Steps 'c' & 'd' should show you the effect seen in the above video.

### Code Reproduction URL

https://github.com/drakedeatonuk/ionic-issue

### Ionic Info

Ionic:

Ionic CLI : 6.20.6 (/Users/drakedeaton/Code/cc-reproduction/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.2.8 (/Users/drakedeaton/Code/cc-reproduction/node_modules/@ionic/angular)
@angular-devkit/build-angular : 15.0.5 (/Users/drakedeaton/Code/cc-reproduction/node_modules/@angular-devkit/build-angular)
@angular-devkit/schematics : 15.0.4 (/Users/drakedeaton/Code/cc-reproduction/node_modules/@angular-devkit/schematics)
@angular/cli : 15.0.5 (/Users/drakedeaton/Code/cc-reproduction/node_modules/@angular/cli)
@ionic/angular-toolkit : 5.0.3 (/Users/drakedeaton/Code/cc-reproduction/node_modules/@ionic/angular-toolkit)

Capacitor:

Capacitor CLI : 4.6.1
@capacitor/android : 4.6.1 (/Users/drakedeaton/Code/cc-reproduction/node_modules/@capacitor/android)
@capacitor/core : 4.6.1 (/Users/drakedeaton/Code/cc-reproduction/node_modules/@capacitor/core)
@capacitor/ios : 4.6.1 (/Users/drakedeaton/Code/cc-reproduction/node_modules/@capacitor/ios)

Utility:

cordova-res : not installed globally
native-run : 1.7.1

System:

NodeJS : v18.13.0 (/usr/local/bin/node)
npm : 9.3.1
OS : macOS

### Additional Information

I've seen this issue talked about in other issues & elsewhere online. For example:
- Both the ion-header & ion-footer have nested ion-toolbars in them which (I've read should fix this type of issue)[https://github.com/ionic-team/ionic-framework/issues/9947].
- [This issue](https://github.com/ionic-team/ionic-framework/issues/9121) mentions a hacky fix but I wasn't sure how to implement it.

It would be nice to have some clearer documentation on this subject because evidently this is an area that caused confusion for a lot of developers. There's a lot of pages online where people have struggling with header & footer animation issues. I think my issue may just be me using the API incorrectly, but unfortunately the solution is just not clear to me, but could've been made clearer with better documentation around this area.

Personally I'd recommend:
- A best practices for using ion-router-outlet in apps.
- A deep-dive on how ion-router-outlet handles navigation between [views with different structures](https://ionicframework.com/docs/layout/structure). This is really an area of complete magic to me currently.
- Example demos of different types of routing setups of varying complexity.

Anyways - thanks in advance for your attention & help on this issue. Any guidance on how to solve this bug would be much appreciated!

Start by running the linked ionic-issue reproduction with `npx ng serve app --port 4200 --host localhost`, then inspect the `ion-router-outlet` transition behavior with `animated=true` on the navigation steps. Done means the ion-header and ion-footer appear and disappear in sync with both forward and backward transitions.

Rédigé par le modèle d'indexation à partir du texte de l'issue.