Change the default page transitions Ionic Vue

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.

Navigation between tabs (I.e. Tab1 to Tab2) does not use animations by design. We try to follow mobile app conventions as closely as possible, and most stock iOS and Android applications do not have animations between tabs. If this is something you would like to see added to Ionic Framework, I recommend creating a feature request on our GitHub repo. Please be sure to include a use case as well as any workarounds you are currently using.

That being said, you can work around this by using the @click handler that you have in your original example. You can set a global transition in the app config. See the navAnimation config option: Config - Ionic Documentation

We also have a guide on how to build an animation using our animation utility: Animations - Ionic Documentation

Thanks for the quick response. I’ve looked at the docs where it mentions setting a custom default animation, but I’m a bit confused how that would work. As I see it, this is how it should be structured in main.ts:

const app = createApp(App)
  .use(IonicVue, {
    animated: true,
    navAnimation: SOME_CHAINED_ANIMATION_FUNCTION
  })

But in all the examples of createAnimation(), there’s a .addElement(myElementRef) chained to it. That’s the element for the animation to be performed on, I’m assuming, but how would I provide that in the example above?

The animation would be applied to various elements, so I’m not sure how to do that, and if I don’t pass it, the animation doesn’t work:

createAnimation() // <-- this animation doesn't play at all
      .addElement(myElementRef) // <-- how do I fix this?
      .duration(1000)
      .fromTo('opacity', '1', '0.5')

The docs for this really need to be improved, but essentially you would provide a function like this:

/**
 * baseEl is the navigation component (I.e. ion-nav),
 * but you likely will not need it.
 *
 * The opts object also has a `direction`
 * key which is either 'back' or 'forward' if you 
 * wanted to do something special based on the direction.
 */
const myAnimation = (baseEl, opts) => {
  const { enteringEl, leavingEl } = opts;

  const enteringPage = createAnimation('entering-page-animation')
    .addElement(enteringEl)
    .fromTo('opacity', 1, 0);

  const leavingPage = createAnimation('leaving-page-animation')
    .addElement(leavingEl)
    .fromTo('opacity', 0, 1);

  return createAnimation('root-transition')
    .duration(500)
    .easing('ease-in-out')
    .addAnimation([enteringPage, leavingPage]);
}

...

const app = createApp(App)
  .use(IonicVue, {
    animated: true,
    navAnimation: myAnimation
  })

You can also check out the transition for MD mode if you want to see an example of something more complex: ionic-framework/md.transition.ts at 0ac8ec1f05d9ddc4afa4c692114e00ed892ca3ec · ionic-team/ionic-framework · GitHub

4 Likes

Thanks for this. It seems like it takes quite an effort even for “simple transitions” like the iOS default push transition, so I guess I’ll stick with the default one for now, otherwise I’ll be spending more time trying to figure out how to animate between pages than working on the rest of the app.

It would be nice if it would be possible to use Vue’s built-in transition component on the router-view element, since the transition can be dynamically adjusted depending on the route. However, as far as I can tell this doesn’t work, though it does show the transition for a brief second when the page is updated through live reload.

Anyways, thanks for your help, it’s much appreciated.

1 Like

BTW for new visitors, I found a solution eventually…see here:

1 Like

Pretty leet, the orders must be reversed however, enteringPage should be 0 → 1 and vice versa.