Transitions makes the page bouncing with a lift

[Incremental]

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

[Incremental]

I created the following Codesandbox where you can see the problem.
https://codesandbox.io/s/layout-drawer-o21ky?file=/src/layouts/MainLayout.vue

Regards