页面内的组件未在iOS的Navigation上设置动画 [英] Component within page not animating on navigate for iOS

问题描述

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

When navigating to a new screen by calling NavController.navigateForward('/url') you get a free native animation which slides the screen in to view. This works as expected unless I use a component within a page component. When I do that, everything animates as expected except the component within the page.

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

When the following page is navigated to the content and title all slide into view as expected.

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

但是，如果将h1标记提取到组件，则只有某些内容..."会滑入视图.显示标题"时不显示动画.

However, if I extract the h1 tag to a component only the "Some content..." slides into view. "The Title" is displayed with no animation.

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

推荐答案

之所以发生这种情况，是因为Ionic希望ion-title位于某个特定位置以便对其进行动画处理.您可以通过查看 iOS页面转换的源代码 .

The reason why that's happening is because Ionic expects the ion-title to be in a certain place for it to be animated. You can see that by inspecting the the source code of the iOS page transition.

您可以看到 在这里 :Ionic会像这样输入ion-toolbar:

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

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

That won't work since the structure of the HTML code will be different if you use a custom component in your ion-header:

ion-header > your-component > ion-toolbar

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

It's recommended not to use a custom component in the ion-header because Ionic expects it to be in a specific way in order to animate it properly.

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

That being said, if you really need to use a custom component there, you can crate your own custom page transition like this:

1. 使用

1. Create a new file myAwesomeTransitionAnimation.ts with the content of the source code of the iOS page transition.
2. Edit the code to make the transition work with your specific HTML structure
3. Edit the app.module.ts file to use that transition instead of the default:

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

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

Please keep in mind that doing so would override the default "animation" of all ion-nav and ion-router-outlet across the whole application.

如果您只想覆盖iOS(使用Android的默认值)，请查看

If you just want to override it for iOS (using the default for Android), please take a look at this comment:

let ionic = [
  IonicModule.forRoot()
];

const platform = new Platform();

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

在模块导入中:

imports: [ ...ionic, ]

这篇关于页面内的组件未在iOS的Navigation上设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！