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

Question

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

当导航到以下页面时，内容和标题都按预期滑入视图。

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

但是，如果我将 h1 标记提取到组件中，则只有 "Some content..." 滑入视图。 "The Title"显示无动画。

<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的默认值"animation"。

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

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

并且在模块导入中：

imports: [ ...ionic, ]

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

Component within page not animating on navigate for iOS

angular

ionic4