Transitions makes the page bouncing with a lift

  • Hello, I’m still a noob on this great framework I’m switching to…
    I started with the demo app and added a Layer Drawer menu and a footer.
    In this menu I link 2 pages from my router.
    Everything is fine since I add a transition effect.
    I’ve done all the stuff found in the forums and the effect is working but :

    1. only the leave-active-class effect is working, not the enter one.
      If I switch the effects, no transition is working !
    2. when I click on the menu item, the page is changing with a transition, but the page height is temporarily too big causing a right lift to appear and the footer to disappear. Then instantly, the lift disappear and the footer is returning which is ugly !!!

    Here is my code.
    MainLayout.vue :

      <q-layout view="hHh Lpr fff" class="shadow-10 rounded-borders"  >
           enter-active-class="animated fadeOut"
           leave-active-class="animated rotateOut"
           <router-view />

    … and my page :

    <q-page class="flex flex-center">
      <h1>Page 1</h1>
     export default { name: "Page1" };

    If I remove the <transition> tag, everything is fine.
    What am I missing with the transitions ?
    Is it a page height problem, and how to solve it for a responsive app ? Thanks

  • I created the following Codesandbox where you can see the problem.