Vue.js 2 page and element transitions with vue-router

Question

I'm trying to achieve a simple page enter and leave transition (Vue-CLI). On the leave transition i'd like to animate some elements out before vue-router moves to the next component. But the <router-link> don't wait for the animation to be finished.

My attempt:

App.vue: <router-view> wrapped in <transition ... > handles page transition

Component.vue: mounted() set state to this.show: true and <transition ... > and v-if animate specific Elements in on render

When I navigate away from the component with the App.vue <router-link> the beforeRouteLeave gets called and sets this.show: false to animate out specific Elements and should then move on. BUT <router-link> renders the next component immediately without waiting...

In short I'd like to achieve smth similar to this http://animate.mhaagens.me/

Any hints?

tony19 · Accepted Answer · 2022-07-16 00:05:47Z

2

I'm not sure if it solves all your problems, especially since I don't know exactly what behaviour you are looking for, but the transition effects in Vue provide transition modes.

transition mode="out-in" is perhaps what you are looking for. It waits for the first transition to end before starting the new one and is useful when transitioning between components. Check out the docs, they're very thorough and really good.

edited Jul 16, 2022 at 0:05

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 9, 2017 at 11:13

Peter Wenström

711 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js 2 page and element transitions with vue-router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related