Quasar: Some out of the box page transitions

[rstoenescu]

[CookieJon]

I'll give it a whirl unless anyone else is keen...

[rstoenescu]

Sure. It's yours. We need those transitions to be theme specific. Thanks for your help!

[CookieJon]

We need those transitions to be theme specific.

Do you mean "Material" theme, or Android and iOS themes? If the latter, I'll have to pass on this one as I don't have much experience with mobile, and I don't have a mobile to develop/test on.

If you mean "Material" theme-specific, then... I'm imagining this task involves CSS-transitions/animations & maybe some JavaScript functions to provide....

• some basic transitions (to start) e.g. fade, slide, dissolve, etc..
• in the manner explained here in the Vue docs: https://vuejs.org/v2/guide/transitions.html
• and according to the Material style guide, here: https://material.google.com/

If that's about the size of it, let me know and I'll carry on.

[rstoenescu]

Yes, use Vue transitions for Material theme. Obviously, animations for iOS are required too. But if you can help with Material part I'm very happy. Thanks a lot for your help!!!

[7ammer]

It would be great if we could have an example similar to iPhones 'uisplitviewcontroller' (for a visual reference see video: https://youtu.be/WjaRUNcccD4?t=20s).

I'm not sure how possible that is with vue-router. Would nested routes be required or perhaps using beforeRouteEnter / beforeRouteLeave?

[rstoenescu]

If it can be done without restricting the user to a specific architecture regarding routes and nesting routes, then it will be implemented, otherwise not sure if it's gonna see the light of day :) This is just an initial rough statement.

[7ammer]

So I think ionic2 achieves iphone's "uisplitviewcontroller" with a method called "navigation stacking". This is instead of using a router.

The link below helps explain it a bit better:
http://mcgivery.com/understanding-ionic-2-navigation-navcontroller/
Notice how Ionic1 originally used routing and dropped it for the "navigation stack" method.

[CookieJon]

(As I mentioned in Gitter...)

Ok, so regarding these out-of-the-box transitions... I have a little question that makes me think I"m misunderstanding teh scope of what's being asked. As I understand it...

• Vue & Vue-router already have a facility to provide CSS Transitions & Animations; you just need to provide the CSS classes for "enter", "leave" + their active states.
• My research has turned up this library: https://daneden.github.io/animate.css/ and I'm sure there are lots more like it.

So, I'm wondering how it could be made any simpler by adding anything to Quasar, other than re-naming the styles already available in transition libraries like the one above to the standard expected by Vue. Perhaps adding props to change the speed, or select different transitions for enter/leave, stuff like that. But really, that doesn't seem like much at all to me... Am I missing something obvious? Thanks

[rstoenescu]

You are perfectly right with your analysis. I'd add "vue-animate" to the discussion (https://github.com/haydenbbickerton/vue-animate) which has animate.css transitions already ported for Vue.

From what I understand people want to be able to use some predefined transitions for pages. So an idea would be to check Material guidelines and see what fits from animate.css. Let's port over the basic transitions (like 'view', 'view-left', etc etc) that the devs can use Vue's <transition> or <transition-group> with. Transition names should be as generic as possible so same name can be applied across themes.

Every theme should have its own animations for each class, according to Material or iOS specifications (which can be found online -- no need for a phyisical phone to check them out).

[Zyles]

Why can't we just wrap our <router-view> with <q-transition> ?

Right now it doesn't work because the old page is still visible when transitioning. But is it hard to make a fix?

[rstoenescu]

Hmm, this is an old ticket. The transitions mentioned are already in v0.14 through quasar-extras package.

[Zyles]

I have the package but the problem still stands.

The transitions on router view does not work because the old route is still visible when the new route enters so for a brief second you can see one route on top of the other.

[rstoenescu]

I agree with you, but this is how those CSS transitions work. This should be done from within Vue and Vue Router code... Quasar has no fault in this whatsoever...
Will see if anything can be done, but I'm currently overloaded with other Quasar stuff at the moment. Any help would be greatly appreciated.

[MartinMuzatko]

Is there a working example out there for page transitions?

[rlam3]

@MartinMuzatko were you able to find any workarounds?

[MartinMuzatko]

Nope, but I a gree with @rstoenescu that this is almost none of quasars business.

[7ammer]

I'm not sure if a new issue should be opened but I still think _page_ transitions are an important part of any app which is trying to replicate a native feel, especially so for IOS users. The 'slideLeft' and 'slideRight' page transition is especially hard to get right. The drag back motion is the equivalent of android's back button and should really be available to users if you want to provide a native feel.

From an architectural and animation standpoint, IOS's transitions look like it would take a lot of work to get right!

This is Framework 7's attempt.

[rlam3]

I agree with @7ammer

OnsenUI is also a similar framework to Quasar and they have both android and iOS page transitions.
I switched from OnsenUI to Quasar hoping that this would include default transitions.

I saw something in the works but don't really know what happened here:
http://forum.quasar-framework.org/topic/199/add-animate-css/2

https://onsen.io/

[rstoenescu]

The purpose of Quasar is to allow simultaneously building mobile apps, websites, electron apps and PWAs. Yes, we could create some components to mimick the exact transitions out of the box, but it would greatly limit the freedom of building highly customisable pages. Quasar is not limited to components that should work on a mobile phone only. With some components (pages, toolbar, etc) specific for mobile you'd be very limited on what pages contain and how. Not to mention this needs to be responsive to allow all the range of width sizes (desktop, mobile, tablet). It would also mean we should divert A LOT from the Vue way of developing an app, with our own router.

Fortunately, the transitions that have been posted can be achieved with Quasar as-is, through animate css supplied by quasar-extras package. It requires a bit of work, but it's achievable. And it's part of the freedom that Quasar offers. We won't start dumbing down the framework just to allow building very specific page animations out of the box.