Flickering on reload of Vue router-views when revisited

[Robert Wildling]

I am trying to find out how, in Vue (here with Quasar 2 / Vite 2) transitions between layouts can be solved. The stackblitz example has to layout "contexts", `home`and `main`. A very important factor is that the routes all have a `meta.layoutKey`, which is set on the `router-view` component as `:key`, so reload only happens, when this context changes. If such a change is detected, the `parent` var in the pinia store is set to true in `router.beforeEach()` – that way a transition can be initialised.

 

Transitions works - kind'a... but there is a flickering happening, when "main" is revisited. I assume this has to do with things like (e.g.) `vue-if="navItems"`, where gsap's `.set(obj, { autoAlpha: 0 })` is set just not right away... How can I solve this?

 

Stackblitz Example:

https://stackblitz.com/edit/quasarframework-vy4eiw

 

(The Readme of the example also contains the problem description. Please understand that I really worked hard to strip down the example; but it needs a certain amount of features and files, otherwise this whole layout transition problem cannot be show-cased. Thank you in advance, if you take your time to look at this!)

See the Pen by edit (@edit) on CodePen

[Cassie]

Hey Robert! Thanks for the demo

 

Just a heads up that due to the nature of this question - it will take considerable time for people to parse and get their head into - and that requires the ability to spare that time. You may not get a response immediately (or at all) Just managing expectations. 

Here's a demo with Vue Router incase it helps at all?

See the Pen LYQaOBm by cassie-codes (@cassie-codes) on CodePen

If no one answers and I have time next week I'll try to dig in and take a look. But hopefully someone has the time and patience to jump in!