Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all articles
Browse latest Browse all 49286

Routing in Ionic React: Transition animation not working under specific conditions

$
0
0

When using routing in Ionic React, the following code executes a transition animation:

const router = useIonRouter()
router.push("/page1", "forward", "push")

Here, if I change routeAction to pop to avoid leaving the transition source in the history, the transition animation is maintained.
However, when returning to the previous page with IonBackButton, the page state is not retained, and a reload occurs.
I want to maintain the page state in this case.

router.push("/page1", "forward", "pop")

Therefore, I changed routerDirection to “none”.
As a result, the page state was maintained, but the transition animation was disabled.

router.push("/page1", "none", "pop")

Also, I explicitly set the animationBuilder parameter as follows, but the transition animation still does not execute:

router.push("/page1", "none", "pop", undefined, customTransitionAnimation)

I want to achieve a transition animation while preserving the state of the previous page but without leaving the previous page in the history during page transitions.
Could you please provide the solution?

The package versions are as follows:

"@ionic/core": "8.4.1",
"@ionic/react": "8.4.1",
"@ionic/react-router": "8.4.1",
"react": "18.3.1",

1 post - 1 participant

Read full topic


Viewing all articles
Browse latest Browse all 49286

Trending Articles