Ion-router-outlet Dynamic Animation Vue

Ionic Framework Ionic Vue
1

So, I’ve asked a similar question here, about changing the default page animation. The problem is that defining a global transition makes it very hard to dynamically change the transition based on the current/future page route.

In the docs, however, it seems like ion-router-outlet has an animation property, to which I can dynamically bind an animation function that’s different for different routes, in this fashion:

<ion-page>
      <ion-router-outlet :animation="myAnimation" />
</ion-page>

The problem with this is that the animation isn’t showing at all, and I can’t figure out why. My animation function(s) work, because if I set any one as the global animation, I can see the page transition being displayed.

There’s probably something simple that I’m missing here, but I can’t see what it is. If anyone could help, that’d be much appreciated. Thanks.

2

Looks like a bug. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/vue@5.7.0-dev.202105031839.bd952eb @ionic/vue-router@5.7.0-dev.202105031839.bd952eb
3

Unfortunately it doesn’t seem to; actually this build seems to break the global animations too, because they don’t work either (e.g. if I set the navAnimation property to mdTransitionAnimation for example, it doesn’t work on this build, but it does on the stable one).

This is how it looks on the latest stable version vs. the dev version you provided.

@ionic/vue@5.6.6
@ionic/vue-router@5.6.6 		@ionic/vue@5.7.0-dev.202105031839.bd952eb
@ionic/vue-router@5.7.0-dev.202105031839.bd952eb
image
image540×1000 552 KB
image
image542×1000 275 KB

The animation does play on the stable one, but it’s the default android animation; my custom animation isn’t playing.

I created a Github repo here with the code I used, including my custom animation, if you need more details.

4

Thanks. So there are two issues here:

  1. I accidentally defaulted animated to false in the dev build. I fixed this in the latest dev build:
npm install @ionic/vue@5.7.0-dev.202105032117.bef1b0a @ionic/vue-router@5.7.0-dev.202105032117.bef1b0a
  1. You are setting the custom animation on the root ion-router-outlet, but the tab pages are rendered in a separate outlet, so the animation on the root ion-router-outlet does not apply. If you look at ion-tabs in your browser dev tools, you should see an ion-router-outlet inside of there. That is the outlet you need to apply the animation to.

As a temporary workaround, you can just grab that ion-router-outlet reference using document.querySelector('ion-tabs ion-router-outlet') and set the animation property that way. I would do this within your Tabs.vue component in an onMounted hook:

import { onMounted } from 'vue';

...

setup() {
  onMounted(() => {
    const routerOutlet = document.querySelector('ion-tabs ion-router-outlet') as any;
    routerOutlet.animation = sampleAnimation;
  });
}

A longer term solution likely will require a new API. The tricky part is that you do not have direct access to the router outlet inside of ion-tabs. We do have plans to expose an API that lets you programmatically push a page while specifying a custom animation, so I think that is the best solution here. It would look something like this:

ionRouter.push('/myPage', myAnimationFunction);
5

Thank you so much! This works great. The new API structure will most definitely be a much needed improvement, but until it’s released, hopefully this’ll work without presenting anymore unexpected problems :crossed_fingers:.

Also, one more quick question. Is it safe to use this dev build when packaging my app, or is it possible that it might not be fully stable yet?

1 Like
6

Thanks for the feedback! The general consensus from other devs I have talked to is the programmatic navigation feature seems to be really valuable.

I would not recommend using that dev build in production. If you need to ship to production and access the props on ion-router-outlet, I would stick with the querySelector approach I detailed above.

7

Ohh, I see. I was under the impression for some reason that the querySelector solution only worked on the dev build. Having it work on the latest stable build is even better, as I don’t have to worry about the build being unstable. Thanks once again, and have a great day!

1 Like