Animate on Vue Router Exit

[zachkrall]

Hi 👋

I was wondering if anyone might have ideas on how to best allow animxyz exit transitions to happen before routes change similar to Framer Motion's exitBeforeEnter.

Right now, I'm manually toggling a "visible" value inside of beforeRouteLeaves

<XyzTransition appear xyz="fade down stagger" duration="auto">
    <div v-if="visible">
        <!-- content -->
    </div>
</XyzTransition>

beforeRouteLeave(to, from, next) {
    this.visible = false;
    setTimeout(() => next(), 550);
}

[codesandbox link]

I'm wondering if there might be better solutions out there.

Thanks 😄

[milesingrams]

I would see if wrapping the <router-view></router-view> component with a transition would work. aka:

<XyzTransition appear mode="out-in" xyz="fade duration-10">
  <router-view></router-view>
</XyzTransition>

Here is an edited version of your codesandbox:
https://codesandbox.io/s/animxyz-vue-router-transitions-forked-k9ci8?file=/src/App.vue

If you want just the children to animate and not the root div of the route components you can add the class xyz-none to the root div.

Additionally, if you want each page to have a different transition you can add a different xyz="..." property on the root div instead of on the XyzTransition component.

Similarly to how you would use the native Vue transition component with Vue router. https://router.vuejs.org/guide/advanced/transitions.html

[milesingrams]

Also, thanks for using the new discussions board!!

[zachkrall]

@milesingrams thanks! that seems to work perfectly!

[codesandbox link]

[milesingrams]

No problem! I added some additional info to my original answer. In case you want to customize it more. You can have different animations for each page by moving the xyz="" property to the root div of each route component. And you can even make it just animate the children and ignore the root div animation by adding an xyz-none class to the root div. If you really wanna get crazy with it you can use direction specific xyz utilities to make the appear, in, and out animations different. aka: xyz="fade appear-down in-left out-right"

Here's an example of some of these: https://codesandbox.io/s/animxyz-vue-router-transitions-test-2-forked-ky8rb?file=/src/views/Contact.vue