vuejs2animate.cssquasar-framework

Vue JS Quasar framework transition rendering collision with router-view

Having an issue with q-transition surrounding a router-view. When the transition occurs, the new content comes into view before the old content has left the DOM. It places the new content low, below the existing element, then it pops up after the old content finally disappears. Is this a known issue or am I just doing something wrong? Is there a workaround?

<q-transition appear enter="bounceInLeft" leave="bounceOutRight">
  <router-view></router-view>
</q-transition>

You can see below that the new content comes in low and is then redrawn.

enter image description here

Thanks

Solution

  • Found the answer by looking at the underlying Vue animation/transition functionality. Needed to set mode="out-in" as specified here: https://v2.vuejs.org/v2/guide/transitions.html