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?

Answer 1

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 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.