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位于某个特定位置以便对其进行动画处理。您可以通过查看 source code of the iOS page transition 来看到。

您会看到 here ，Ionic会像这样输入ion-toolbar：

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

here 会得到ion-title，如下所示：

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

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

ion-header > your-component > ion-toolbar

建议不要在ion-header中使用自定义组件，因为Ionic希望采用特定的方式对其进行适当的动画处理。

话虽如此，如果您确实需要在此处使用自定义组件，则可以创建自己的自定义页面转换，如下所示：

使用 source code of the iOS page transition 的内容创建一个新文件myAwesomeTransitionAnimation.ts。
编辑代码以使转换与您的特定HTML结构一起使用
编辑app.module.ts文件以使用该过渡而不是默认过渡：

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

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

如果您只想覆盖iOS（使用Android的默认值），请查看 this comment ：

let ionic = [
  IonicModule.forRoot()
];

const platform = new Platform();

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

在模块导入中：

imports: [ ...ionic, ]

页面内的组件未在iOS的Navigation上设置动画

1 个答案: