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.