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 :

    <template>
      <q-layout view="hHh Lpr fff" class="shadow-10 rounded-borders"  >
      ....
      <q-page-container>
         <transition
           appear
           enter-active-class="animated fadeOut"
           leave-active-class="animated rotateOut"
           :duration="300"
           >
           <router-view />
         </transition>
       </q-page-container>
    
       <q-footer>
          <q-toolbar>
             <q-toolbar-title>Footer</q-toolbar-title>
          </q-toolbar>
        </q-footer>
      </q-layout>
    </template>
    

    … and my page :

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

    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.
    https://codesandbox.io/s/layout-drawer-o21ky?file=/src/layouts/MainLayout.vue

    Regards