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>