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

[elliedog]

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>

[king_of_leon]

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.

[elliedog]

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>