Vue.js 2 and element transitions with vue-router
I'm trying to do a simple page transition and leave a transition ( Vue-CLI
). On the transition to leave, I would like to animate some elements before vue-router moves on to the next component. But <router-link>
don't wait for the animation to complete.
My attempt:
App.vue: <router-view>
wrapped in <transition ... >
handles page transition
Component.vue: mounted()
set state this.show: true
and <transition ... >
and v-if
animate specific elements in render mode
When I navigate away from the component using App.vue <router-link>
, it gets called beforeRouteLeave
and set this.show: false
to animate the individual elements and then should move on. BUT <router-link>
immediately displays the next component without waiting ...
Long story short, I would like to get something similar to this http://animate.mhaagens.me/
Any hints?
source to share
I'm not sure if it solves all your problems, especially since I don't know exactly what behavior you are looking for, but 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 complete before starting a new one and is useful when transitioning between components. Check the docs , they are very thorough and really good.
source to share