iOSのナビゲートでアニメーション化されていないページ内のコンポーネント

debugcn 投稿 Dev

クレイグ

呼び出して新しい画面に移動すると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>

セバフェレラス

それが起こっている理由は、Ionicion-titleがアニメーション化するために特定の場所にあることを期待しているためです。iOSページトランジションのソースコードを調べると、それを確認できます。

ここでわかるion-toolbarように、Ionicは次のように入力します。

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-headerIonicは、適切にアニメーション化するために特定の方法であると想定しているため、でカスタムコンポーネントを使用しないことをお勧めします。

そうは言っても、そこでカスタムコンポーネントを本当に使用する必要がある場合は、次のように独自のカスタムページトランジションを作成できます。

iOSページトランジションのソースコードのmyAwesomeTransitionAnimation.ts内容で新しいファイルを作成します。
コードを編集して、特定のHTML構造でトランジションが機能するようにします
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,
    })
  ]
}

そしてモジュールのインポートでは：