How to use slide transition between one component while switching pages?



  • Hi,

    I’m looking for advice on how to go about a “smooth” transition between two routes. By default I have the desired effect, just want the transition slowed down. Thanks in advance!

    /layouts/login/Login.vue

    <template>
      <div class="fit row wrap justify-center  content-start q-pt-xl">
        <q-card
          class="q-pl-xl q-pr-xl q-pb-xl q-mt-xl"
          style="width: 100%; max-width: 448px; background: #FFFFFF"
        >
          <q-card-section class="q-pl-none  q-mt-lg">
            <div style="color: #1a1f36;" class="text-h6 text-weight-regular">
              Sign in to your account
            </div>
          </q-card-section>
          <q-form>
            <span style="color: #3c4257; font-size: 14px;">Username</span>
            <q-input outlined v-model="username" class="q-pb-md q-pt-sm " />
            <div>
              <div class="row  ">
                <div class="col self-end q-pb-sm">
                  <span style="color: #3c4257;">Password</span>
                </div>
                <div class="col text-right ">
                  <span>
                    <q-btn
                      no-caps
                      size="14px"
                      color="primary"
                      label="Forgot your password?"
                      class="test"
                      flat
                      to="/reset"
                  /></span>
                </div>
              </div>
              <q-input class="q-pb-lg" outlined v-model="password" />
            </div>
            <div>
              <q-btn
                color="primary"
                label="Continue"
                class="full-width q-pt-sm q-pb-sm"
              />
            </div>
          </q-form>
        </q-card>
      </div>
    </template>
    
    <style lang="stylus" scoped></style>
    
    <script>
    export default {
      data() {
        return {
          name: null,
          password: null,
          
        };
      }
    };
    </script>
    
    

    /layouts/login/pages/Reset.vue

    <template>
      <div class="fit row wrap justify-center  content-start q-pt-xl">
        <q-card
          class="q-pl-xl q-pr-xl q-pb-xl q-mt-xl"
          style="width: 100%; max-width: 448px; background: #FFFFFF"
        >
          <q-card-section class="q-pl-none  q-mt-lg">
            <div style="color: #1a1f36;" class="text-h6 text-weight-regular">
              Sign in to your account
            </div>
          </q-card-section>
          <q-form @submit="onSubmit" @reset="onReset">
            <span style="color: #3c4257; font-size: 14px;">Username</span>
            <q-input outlined v-model="username" class="q-pb-md q-pt-sm " />
            <div>
              <q-btn
                color="primary"
                label="Continue"
                class="full-width q-pt-sm q-pb-sm"
                  to="/login"
             
              />
            </div>
          </q-form>
        </q-card>
      </div>
    </template>
    
    <style lang="stylus" scoped>
    
    </style>
    
    <script>
    export default {
      data() {
        return {
          username: null,
        }
      },
    
    };
    </script>
    

    /layouts/login/components/core/View.vue

    <template>
      <q-page-container>
    
            <router-view />
    
      </q-page-container>
    </template>
    
    <script>
    export default {
      name: "DashboardCoreView"
    };
    </script>
    

    /layouts/login/Index.vue

    <template>
      <q-layout view="lHh Lpr lFf">
        <dashboard-core-view />
      </q-layout>
    </template>
    
    <script>
    
    
    
    export default {
      name: 'Dashboard',
    
      components: {
    
        DashboardCoreView: () => import('./components/core/View'),
      },
    }
    </script>
    


  • Here is how I used :
    <transition name=“slide” mode=“out-in”>
    <router-view />
    </transition>
    <style>

    .slide-enter-active,
    .slide-leave-active {
    transition: opacity 0.5s, transform 0.5s;
    }

    .slide-enter,
    .slide-leave-to {
    opacity: 0;
    transform: translateX(-30%);
    }

    </style>

    Hope this helps.



  • I tried that an am getting this error with no effects:

    [Vue warn]: invalid <transition> mode: “out-in”

    found in

    —> <QPageContainer>
    <LoginCoreView> at src/layouts/login/components/core/View.vue
    <QLayout>
    <Login> at src/layouts/login/Index.vue
    <App> at src/App.vue
    <Root>


Log in to reply