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:
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
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.