iOS 导航时页面内的组件没有动画

Question

通过调用导航到新屏幕时，NavController.navigateForward('/url')您将获得免费的本机动画，该动画可将屏幕滑入查看。除非我在页面组件中使用组件，否则这将按预期工作。当我这样做时，除了页面内的组件之外，所有内容都会按预期进行动画处理。

当下一页导航到内容和标题时，所有内容都会按预期滑入视图。

<ion-header>
    <h1>The Title</h1>
</ion-header>
<ion-content>
    Some content...
</ion-content>

但是，如果我将h1标签提取到组件中，则只有“某些内容...”会滑入视图。“标题”显示时没有动画。

<ion-header>
    <app-my-component>The Title</app-my-component>
</ion-header>
<ion-content>
    Some content...
</ion-content>

Answer 1

发生这种情况的原因是 Ionic 希望ion-title它能够在某个位置进行动画处理。您可以通过检查iOS 页面转换的源代码看到这一点。

正如你在这里看到的，Ionic 的输入是ion-toolbar这样的：

const enteringToolBarEls = enteringEl.querySelectorAll(':scope > ion-header > ion-toolbar');

在这里，它是ion-title这样的：

enteringTitle.addElement(enteringToolBarEl.querySelector('ion-title'));

这是行不通的，因为如果您在以下内容中使用自定义组件，HTML 代码的结构将会有所不同ion-header：

ion-header > your-component > ion-toolbar

建议不要在 中使用自定义组件，ion-header因为 Ionic 希望它以特定的方式进行正确的动画处理。

话虽这么说，如果您确实需要在那里使用自定义组件，您可以像这样创建自己的自定义页面转换：

1. 使用 iOS 页面转换的源代码myAwesomeTransitionAnimation.ts内容 创建一个新文件。
2. 编辑代码以使转换适用于您的特定 HTML 结构
3. 编辑app.module.ts文件以使用该过渡而不是默认过渡：

imports: [
    ...
    IonicModule.forRoot({  
      navAnimation: myAwesomeTransitionAnimation,
    }), 
  ],

请记住，这样做会覆盖整个应用程序的默认“ion-nav动画ion-router-outlet ”。

如果您只想在 iOS 上覆盖它（使用 Android 的默认值），请查看此评论：

let ionic = [
  IonicModule.forRoot()
];

const platform = new Platform();

if (platform.is('ios')) {
  ionic = [
    IonicModule.forRoot({
      navAnimation: myAwesomeTransitionAnimation,
    })
  ]
}

在模块导入中：

imports: [ ...ionic, ]