Disable transition animation on specific pages

Ionic Framework Ionic Vue
1

Hi there,

is it somehow possible to deactivate the page transition animation for specific pages on router level? I know it is possible for some ionic components via the the routerDirection property. But is it also possible by doing programmatic navigation?

My use case is, that the login page is outside the application hierarchy, and therefore a transition animation is not appropriate. It would be cool to set this on router level, so that I can specify routerDirection: 'root' for the login page globally. Or is there any workaround to achieve this handling?

Thanks!

2

Hey there! We do not have this functionality in Ionic 5, but we do have it in the upcoming Ionic 6 release.

In Ionic 6 you will be able to do something like the following:

import { useIonRouter } from '@ionic/vue';
const router = useIonRouter();

...

router.push('/login', 'root');

Ionic 6 is in Release Candidate and will be released this year. You can see the docs for useIonRouter here: Vue Navigation | Ionic Documentation

3

Thanks, that’s perfect!

1 Like