How to use transitions between routes?

Master

Hello, I’m having trouble trying to find the best solution / method for transitioning between routes that are similar to Android transitions. Has default transitions that can be used out of the box?

metalsadman

use vuejs transition https://vuejs.org/v2/guide/transitions.html, and wrap your router-view inside it.
example:

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

rstoenescu

And make sure that you add those animations to quasar.conf > animations. Example: animations: ['fadeIn', 'fadeOut']

Master

Thanks! I resolve it.

g_hult

I had to do a hack to make this work. Am I missing something?

The route transition was only taking place on initial load. So I added a random key to router-view like so to make it work <router-view :key="Date.now()">

Must be a more elegant way to solve it, right?

metalsadman

You’re probably loading same component on a different route. This is Vue and should work ootb.

g_hult

@metalsadman
Oh yeah thanks! The component of all my pages is a q-page with no key assigned so that might be why the transition does not trigger

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?