Ionic 6：ion-header与ion-footer路由过渡动画和ion-content不同步

我使用了开启animated=true的ion-router-outlet，在两个组件间导航时遇到了动画不同步的问题：

• 从组件A跳转至组件B时，ion-header和ion-footer会先于页面过渡动画提前出现；
• 从组件B返回组件A时，ion-header和ion-footer要等到过渡动画完全结束后才会消失。

注：观察图中红色背景的出现/消失时机，与页面过渡动画完全不同步。

我需要实现的效果是：ion-header和ion-footer的显示/消失能和组件间的过渡动画保持同步。

我已经尝试过相关方案：在ion-header和ion-footer内部嵌套了ion-toolbar，根据此前的问题讨论（ion-footer's content not animated with custom component #9947），这种方式应该能解决类似问题，但实际测试后并未生效。

如果有人知道解决方法，麻烦告知，感谢！

最小复现方式 #

代码仓库：https://github.com/drakedeatonuk/reproduction

复现步骤：

1. 拉取该仓库代码；
2. 执行命令 npx nx serve app；
3. 在浏览器中访问 localhost:4200/home/tab；
4. 点击页面中的“Page link”按钮；
5. 点击“Back”按钮查看返回动画。

环境配置信息 #

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 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)
cordova-res : not installed globally
native-run : 1.7.1
NodeJS : v18.13.0 (/usr/local/bin/node)
npm : 9.3.1
OS : macOS

内容的提问来源于stack exchange，提问作者drakedeatonuk