No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Transitions makes the page bouncing with a lift

    Framework
    page router transition
    1
    2
    336
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • I
      Incremental last edited by

      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

      1 Reply Last reply Reply Quote 0
      • I
        Incremental last edited by

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

        Regards

        1 Reply Last reply Reply Quote 0
        • First post
          Last post