如何为离子含量制作离子动画

Question

我想为页面内容(离子内容)制作动画，而不是所有页面都包含离子标题。因此，离子内容必须是动画的，而离子头动画必须禁用。

动画可以为整个页面工作，但是如果我将目标设置为离子内容，它就不起作用了。

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;
};

我试图使离子含量的目标像这样，但这次动画不工作:

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

实际上，如果你让离子含量目标从enteringEl

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

Answer 1

我没有找到任何解决方案后，我认为没有办法从IonicModule.forRoot导航于是我下了一个指令:https://dev.to/timsar2/custom-ionic-animation-on-routing-4i21