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.

So I guess you need to make sure to add !important after content. It doesnt need it on chrome emulator but on the actual device it does

.fa-map:before
  content ''!important
  background url('~assets/route.svg')
  width 30px
  height 30px

@eleina now that Quasar is going to use fontawsome icon you can change a standard icon like so with CSS/Sass/Stylus (not sure if thats what you were referring to in your post about ‘Found a way with CSS to put the icon there, but it’s a bit ugly’):

.fa-facebook:before{
      content:url("path/to/your/img.svg");
}

@rstoenescu Sorry, dumb oversight. Thanks!

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)

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)

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.

@spectrolite I will take a look but the features I am describing are pretty common. In Framework 7 they come standard with the vue setup. Here is a link:

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

In their frame work you just add the tag of dynamic to the header for the fade transition and for the route you just add a tag to the link I think. Was just wondering if they had this out of the box for Quasar.

So I guess you need to make sure to add !important after content. It doesnt need it on chrome emulator but on the actual device it does

.fa-map:before
  content ''!important
  background url('~assets/route.svg')
  width 30px
  height 30px

So in the past I have replaced fontawsome icons with my own like so:

.fa-map:before
  content ''
  background url('~assets/route.svg')
  width 30px
  height 30px

This method works great when running in on my browser using quasar dev ios but when I run this on my actual device by doing a build and opening up XCode to run on my IPhone the icons for the old font awesome are there plus my replacement ones.

See Below

@eleina now that Quasar is going to use fontawsome icon you can change a standard icon like so with CSS/Sass/Stylus (not sure if thats what you were referring to in your post about ‘Found a way with CSS to put the icon there, but it’s a bit ugly’):

.fa-facebook:before{
      content:url("path/to/your/img.svg");
}

Is there a potential release date? I am looking to use this over Framework 7 Vue but need some features in .14 before I can commit. Thanks!!! Looks great.

I am really loving this framework, but unfortunately my enterprise app will be need in remote areas where service is not always good. Is there any way to have offline option and sync data when reconnect? Or I guess I should say, any good tutorials on how to do this?

@rstoenescu @vic2017 I am also having this issue. Every time I after I work on the app, the changes look good when I am serving it (dev mode from the src folder). I then run quasar build. Then I open up the app in Xcode and deploy to my phone but dont see the changes I made (that I see in dev mode).

OS: Mac Sierra ( 10.12.4 (16E195) )

NODE: 7.2.1

NPM: 4.0.5

CORDOVA: 6.5.0

Is there a way to turn this off? I would prefer to use my common workflow in all my projects which use tabs not spaces, but when I do it in any vue file I get a compile error