How to animate Ionic animation just for ion-content

Question

I want to make animation just for page content (ion-content) an not all page included ion-header. So ion-content must be animate and ion-header animation must be disable.

animation work for the whole page, But if I make target to ion-content it's not working.

    export const customAnimation = (baseEl: HTMLElement, opts: AnimationOptions) => {
      const rootTransition = animationCtrl
        .create()
        .duration(opts.duration || 3333)
        .easing('ease-in');
      const enterTransition =
        animationCtrl.create().addElement(opts.enteringEl);

      const baseTransition =
        animationCtrl.create().addElement(opts.baseEl);

      if (opts.direction === 'forward' || opts.direction === 'root') {
        baseTransition.fromTo('transform', 'translateY(100%)', 'translateY(10%)').duration(500);
        enterTransition.fromTo('transform', 'translateY(10%)', 'translateY(100%)').duration(1000);
      } else {
        enterTransition.fromTo('transform', 'translateX(100%)', 'translateX(0%)');
      }

      rootTransition.addAnimation([baseTransition, enterTransition]);
      return rootTransition;
    };

I was trying to make an ion-content target like this but this time animation not working:

addElement(baseEl.querySelector('ion-content'))

Actually, it is not working if you make ion-contetn target from enteringEl

opts.enteringEl.querySelectorAll(':scope > ion-content')

Answer 1

After I didn't find any solution I think no way to make that by navigation from IonicModule.forRoot so then I made a directive to do that: https://dev.to/timsar2/custom-ionic-animation-on-routing-4i21