I can’t seem to find any reference in the docs that explains how to change the style of the transitions between pages, at least for Vue (the docs are dripping with everything Angular still).
Initially there was no transition when I’d navigate between views, but that seems to be because I’ve been using an href on the tab buttons (which was set up by default in the template). After replacing the hrefs with router.push(), the transitions work:
<ion-tab-button selected="true" tab="home" @click="router.push('/tabs/home')">
<ion-icon :icon="home" />
</ion-tab-button>
…but they are a sort of slide-up-and-fade-in style, which doesn’t really fit in the flow of the app. I want to change it to a slide or push from the left or right depending on if the tab is on the left or right of the screen, but I can’t find any mention on how to do this. All the animation references in the docs seem to just be on how to animate components, but not pages.
I was thinking I could maybe use ion-slides, because that seems to support different animations, but I don’t think that would easily integrate with Vue Router, since all the views would have to be in one element, and so I’d rather avoid this way if I can.
If anyone could help me with this, that would be great.
2 posts - 2 participants
