Route Animations

packy

I posted in here before but I guess did not explain it well enough. Basically other frameworks that use Vue such as Framework 7 have out of the box header and route animations that look like so:

https://cdn.framework7.io/i/feats/swipeback.mp4
https://cdn.framework7.io/i/feats/navbar.mp4

When I look through the Quasar docs the only option I see is using the

<q-transition
      appear
      enter="slideInRight"
      leave="slideOutRight"
      :duration='500'
    >
       <router-view />
</q-transition>

The issue with that is:

The animate.css transitions seem clunky like this (not smooth) when you shorten duration
Tabbed pages or single level pages should have no animation on enter from a tab, only when being reached via “back”
There is no drop shadow on pages being slid in
Header should animate in new elements separately with that slide cross-fade

I know I can wrap elements in my specific components to achieve different animations on different elements/routes but this seems clunky still and a lot of extra code for a native feel. Is there any pre made native looking transitions (not animate.css)? Is there a tag on the layout I can use (I think Framework 7 you just add dynamic to the header to get that animation).

Here is another framework with out of the box ios animations

https://onsenui.github.io/vue-onsenui-kitchensink/

Here you can see clicking on tabs has no animation, but then if you click on the far right tab you can view all native looking animations .

With animations being such a big part of a nice looking app I would have to choose those 2 frameworks over Quasar even though I like this setup a lot more.

oliver

If page transitions (with that “original native” feeling) is a key requirement for your app and you’re not planning on diving deeper (like, DIY), it’s probably better to use a different framework that already has a stable implementation. From what I understand, mobile isn’t the primary target for Quasar. Even though I think such an option would make it more popular, too.

packy

Thanks @oliver. On the home page it states “Build responsive websites, hybrid mobile Apps (that look native!) and Electron apps using same code” so I just assumed there would be some native page animations like all the other frameworks out there. I really like everyting about this one, but do need to have some page transitions. Using Animate.css for those transitions always comes out bad in my opinion. Looks like I will have to either make something myself or move to Framework7.

@rstoenescu @administrators is there proposed new feature for built in native route transitions coming soon? (please see my links in original post for what I am reffering too)

JCharante

@packy

Opt-in router animations sound dope, I’m not saying it’s anywhere close to a priority but I don’t think it should be discounted just because mobile isn’t the primary focus. Did you open a [Request] issue on Github?

oliver

@packy Yeah I just think it’s not gonna happen anytime soon. Additionally, if you plan to go for full UX confirmity for iOS and material according to the respective guidelines and all the UI components Google and Apple mention, there’s still a lot missing or implemented slightly different. For this use case, something like framework 7 seems to be the right choice. It’s their defined goal to be 100% native conform. So a lot less customisation needed to get something working quickly.

I personally don’t try to go for that 100% native feeling and I build my transitions with animeJS timelines in JS, so I chose quasar for my personal project as it’s easier to build on top of something less tied and locked down than to refactor and redefine tons of CSS and not using 80% of a framework.

It really depends on what you’re trying to achieve. I’m aiming for a custom designed hybrid app without cordova, so this is a good fit, performance and workflow wise. Minimal bloat and fast. If you rely on cordova, there’s probably an out of the box workflow In Framework 7 as well for that. Don’t know for sure though.

Heavily subjective though.

Zyme

I want router animations too when changing pages. Instead of being instant I want a smooth fadeout.

Any news on this?

leon

@Zyme
Try

  <q-transition appear enter="fadeInLeft" leave="fadeOutRight" mode="out-in">
       <router-view  :key="$route.name" />
  </q-transition>

Remember to read http://quasar-framework.org/components/transition.html for imports

stuartcusack

I’ve updated the answer by @Zyme for the current version of Quasar (0.17.17)

<q-page-container>

    <transition appear enter-active-class="animated slideInRight" leave-active-class="animated slideOutLeft" mode="out-in">
        <router-view />
    </transition>

</q-page-container>

Note that mode=“out-in” is important. Don’t forget to add these animations to quasar.conf:
https://quasar-framework.org/components/transition.html

No More Posting New Topics!

Route Animations