How to listen on IonRouterOutlet transition start/complete?

@j-carignan wrote:

Hello,

I’m using an <IonTabs> component which contains an <IonRouterOutlet> with the iosTransitionAnimation set as animation. I would like to have an event handler when the transition of the <IonRouterOutlet> starts and finishes.

I want this callback at the <IonTabs> / <IonRouterOutlet> level. So using the lifecycle hooks inside their children is not an option.

I tried using the onIonTabsWillChange and onIonTabsDidChange props on <IonTabs> with no success.
I tried extending the animation I am providing to the <IonRouterOutlet> with no success either. This is what I tried:

import { iosTransitionAnimation } from '@ionic/react';
<IonTabs onIonTabsWillChange={ () => console.log('start?') } onIonTabsDidChange={ () => console.log('end?') }>
	<IonRouterOutlet animation={ (el, opts) => iosTransitionAnimation(el, {...opts, ...{ progressAnimation: true, progressCallback: (ani) => { console.log('progress?', ani) }}}) }>
		<Route { ... }  />
		<... />
	</IonRouterOutlet>
	<IonTabBar ... />
</IonTabs>

Thank you for help!

Posts: 1

Participants: 1

Read full topic