How to use transitions between routes?

Tinny

@metalsadman said in How to use transitions between routes?:

<transition
  enter-active-class="animated fadeIn"
  leave-active-class="animated fadeOut"
  appear
  :duration="300"
>
  <router-view />
</transition>

There seems to be a bug when you use this transition without a q-header (on mobile/capacitor at least): the text is displayed at the bottom of the screen during the transition, and then jumps up to the top to its correct position when the transition is finished.
You can test with this:

<template>
  <q-page>
    abc
  </q-page>
</template>

With q-header this “jump” isn’t visible, probably because the header pushes the text below the bottom edge of the screen.

Is there any workaround for this, or any other transitions that can be used that gives a “mobile” experience and that works smoothly?

dobbel

this works out of the box: ( with a boot file of course)

https://github.com/Orlandster/vue-page-transition

Tinny

Awesome, I’ll check it out. Thanks!

I’m a Quasar noob though, so how/what do I need to add to the boot file?

dobbel

https://quasar.dev/quasar-cli/cli-documentation/boot-files

Simple way is to check out a new quasar project and selected i18n as option. Then you have an example how boot files work.

add boot file foo.js in the boot folder
add line with foo in quasar.conf under boot

this is the content of my bootfile: ( i don’t know how to format a block as code)

import Vue from “vue”;
import VuePageTransition from “vue-page-transition”;

Vue.use(VuePageTransition);

jadedRepublic

I would recommend having a second router view, one for all of your main pages and the transition for all child pages of a main page e.g.

<router-view/>
<router-view name="popup" v-if="$route.meta.popup"/> // Add your css transition or use a dialog

Routes

{
  path: '/home/',
  component: () => import('layouts/default.vue'),
  children: [
    {
      path: '',
      component: () => import('pages/Home/index.vue'),
      name: 'home',
      meta: {
        popup: false,
      },
    },
    {
      path: 'about',
      name: 'about.popup',
      components: {
        default: () => import('pages/Home/index.vue'),
        popup: () => import('pages/About/index.vue')
      },
      meta: {
        popup: true,
      },
    },
  ]
},

Tinny

@dobbel said in How to use transitions between routes?:

https://quasar.dev/quasar-cli/cli-documentation/boot-files

Simple way is to check out a new quasar project and selected i18n as option. Then you have an example how boot files work.

add boot file foo.js in the boot folder

add line with foo in quasar.conf under boot

this is the content of my bootfile: ( i don’t know how to format a block as code)

import Vue from “vue”;
import VuePageTransition from “vue-page-transition”;

Vue.use(VuePageTransition);

Thanks again, and sorry for the late reply!

I just tried it, and it “kind of” works: there is a transition animation, but during the transition/animation, the header bar is rendered right below the bottom border of the normal position of the header, and then snaps up to its correct position (does that make sense)?

I suspect I am not using the transitions (or quasar) correctly, but I currently have done this, as per the instructions:

<vue-page-transition name="fade-in-right">
  <router-view/>
</vue-page-transition>

in MainLayout.vue. Each page then contains its own q-header, as the headers on each page have different buttons (or no buttons).

@jadedRepublic said in How to use transitions between routes?:

I would recommend having a second router view, one for all of your main pages and the transition for all child pages of a main page e.g…

I’m not sure I quite understand, but wouldn’t that mean you have a single header for all the pages, so you simply transition the content below the header, while you dynamically set the content of the single header?

jadedRepublic

@Tinny I made a sandbox as an example, sorry I don’t visit this forum often

Tinny

Thanks a bunch @jadedRepublic !
With that setup would need to dynamically set header for each page (as I wrote earlier), correct?

jadedRepublic

@Tinny I’m fairly certain that’s how the layout Is intended anyway In Quasar, I personally make page specific changes to my layout header using $route.name, you can change what Is visible and what Isn’t like this:

<template>
 <q-header>
    <component :is="component.name" v-for="(component, index) in components" :key="index" v-if="$route.name == component.route"/>
</q-header>
</template>

<script>
export default {
   data () {
      return {
      components: [
        {
          name: 'AboutActions',
          route: 'about',
        },
        {
          name: 'ContactActions',
          route: 'contact'
        },
        {
          name: 'ShopActions',
          route: 'shop',
        },
      ]
      }
    },
    components: {
      AboutActions: () => import("./Includes/About"),
      ContactActions: () => import("./Includes/Contact"),
      ShopActions: () => import("./Includes/Shop"),
    },
   }
</script>

rstoenescu

Or you could have the QHeader declared in each page.
But bare in mind that only one QHeader can be “active” at any point in time.

Tinny

@rstoenescu I currently have a unique QHeader in each page, as they are quite different between the pages (e.g. some headers have a button, some two, some none, etc…). That in itself works fine.

The problem I encountered is on the single page I don’t have a QHeader: the transition doesn’t really work, as I tried to describe in my first post in this thread. It’s very easy to reproduce on a Capacitor app, as per my explanation in that post. That’s why I asked about transitions and if I’m maybe using them wrong.

Because of that issue, I have currently disabled all transitions in my app.

(Regardless, thank you for your awesome framework! I only discovered Quasar recently, and settled on it after having tried and discarded several other frameworks over the course of several weeks of testing.)

No More Posting New Topics!

How to use transitions between routes?