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

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

• v4.x
• v5.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 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. 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!

首先使用 npx ng serve app --port 4200 --host localhost 运行链接的 ionic-issue 复现，然后检查导航步骤中 animated=true 时 ion-router-outlet 的过渡行为。当 ion-header 和 ion-footer 与向前和向后过渡同步出现和消失时，即表示完成。